精华内容
下载资源
问答
  • 折线图样式

    2019-05-06 14:08:37
    https://github.com/PhilJay/MPAndroidChart
    展开全文
  • 主要介绍了python matplotlib折线图样式实现过程,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • Echarts之折线图样式

    2020-03-21 14:06:14
    Echarts之折线图样式html部分css部分js部分 html部分 <div id="brokenline"></div> css部分 #brokenline { position: absolute; top: 68px; left: 15px; width: 150...

    Echarts之折线图样式

    html部分

     <div id="brokenline"></div>
    

    css部分

     #brokenline {
                position: absolute;
                top: 68px;
                left: 15px;
                width: 1503px;
                height: 334px;
            }
    

    js部分

      <script>
            var myChart = echarts.init(document.getElementById('brokenline'));
            var option = {
                tooltip: {
                    trigger: 'axis'
                },
                //图表部分
                legend: {
                    top: 0,
                    right: 260,
                    data: [{
                        name: '已处理告警',
                        icon: 'line',
                        textStyle: {
                            fontSize: 12,
                            color: '#fc41a8'
                        },
                    }, {
                        name: '全部告警',
                        icon: 'line',
                        textStyle: {
                            fontSize: 12,
                            color: '#3985e0'
                        }
                    }]
                },
                grid: {
                    left: '5%',
                    right: '5%',
                    bottom: '30%',
                    containLabel: true
                },
                //x轴样式调整
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    fontSize: 12,
                    axisLine: {//坐标轴
                        lineStyle: {
                            width: 3,
                            color: '#22497a'//设置透明度就可以控制显示不显示
                        },
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#52ffff',
                            fontSize: 12
                        },
                    },
                    splitLine: {//网格线
                        show: true,//网格线
                        lineStyle: {
                            color: '#1b3062',
                        },
                    },
                    axisTick: {//刻度线
                        show: false,//去掉刻度线
                    },
                    data: ['3.15', '3.16', '3.17', '3.18', '3.19', '3.20', '3.21', '3.22', '3.23', '3.24', '3.25', '3.26', '3.27', '3.28', '3.29', '3.30']
                },
                //y轴样式调整
                yAxis: {
                    type: 'category',
                    boundaryGap: false,
                    fontSize: 12,
                    axisLine: {//坐标轴
                        lineStyle: {
                            width: 3,
                            color: '#22497a'//设置透明度就可以控制显示不显示
                        },
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#52ffff',
                            fontSize: 12
                        },
                    },
                    splitLine: {//网格线
                        show: true,//网格线
                        lineStyle: {
                            color: '#1b3062',
                        },
                    },
                    axisTick: {//刻度线
                        show: false,//去掉刻度线
                    },
                    data: ['0', '2', '4', '6', '8', '10', '12', '']
                },
                series: [
                    {
                        name: '已处理告警',
                        type: 'line',
                        stack: '总量',
                        symbol: 'circle',
                        symbolSize: 10,
                        itemStyle: {
                            normal: {
                                color: '#fc41a8',
                                borderColor: 'white',
                                lineStyle: {
                                    width: 3
                                },
                            }
                        },
                        data: ['0', '2', '4', '8', '10', '0', '2', '4', '8', '10', '0', '2', '4', '8', '10', '0']
                    },
                    {
                        name: '全部告警',
                        type: 'line',
                        stack: '总量',
                        symbol: 'circle',
                        symbolSize: 10,
                        itemStyle: {
                            normal: {
                                color: '#3985e0',
                                borderColor: 'white',
                                lineStyle: {
                                    width: 3
                                },
                            }
                        },
                        data: ['8', '10', '0', '2', '4', '8', '10', '0', '2', '4', '8', '10', '0', '2', '4', '10']
                    },
                ]
            };
            myChart.setOption(option);
        </script>
    
    展开全文
  • echarts折线图样式

    2020-07-23 14:56:49
    tooltip: { trigger: "item", triggerOn: "'mousemove|click", showContent: true, transitionDuration: 0, formatter: "{b0}<br />{c0}" }, xAxis: { type: "category", boundaryGap: false, ...
    tooltip: {
      trigger: "item",
      triggerOn: "'mousemove|click",
      showContent: true,
      transitionDuration: 0,
      formatter: "{b0}<br />{c0}"
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: ["", "学前测试", "知识点学习", "学后测试"],
      offset: 20,
      axisLine: {
        show: false,
        lineStyle: {
          color: "#ADB9C5"
        }
      },
      axisLabel: {
        fontSize: 14
      },
      axisTick: {
        show: false
      }
    },
    yAxis: {
      type: "value",
      name: "能力值变化",
      min: 0,
      max: 1,
      splitNumber: 10,
      offset: 10,
      nameTextStyle: {
        color: "#14112E",
        fontWeight: "bolder",
        fontSize: 17,
        lineHeight: 56,
        align: "right"
      },
      axisLine: {
        show: false,
        lineStyle: {
          color: "#ADB9C5"
        }
      },
      axisTick: {
        show: false
      }
    },
    series: [
      {
        type: "line",
        // symbol: "emptyCircle", 
        symbolSize: 20,//拐点大小
        data: [0, 0.7, 0.3, 0.8],//图片的值
        lineStyle: {
          normal: {
            color: "#166CC8",//线的颜色
            shadowColor: "#166CC8", //线阴影颜色
            shadowOffsetY: 5, //阴影大小
            shadowBlur: 10
          }
        },
        itemStyle: {
          normal: {
            color: "#166CC8", //拐点的颜色
            borderWidth: 1, //拐点边框
            borderColor: "white" //拐点边框颜色
          }
        }
      }
    ]```
    
    展开全文
  • 4.对折线样式的修改; 5.y轴单位样式. var chartDom = document.getElementById('main'); var echart = echarts.init(chartDom, 'dark'); //dark ,深色主题 var option = { tooltip: { trigger: 'axis', }, color...

    项目中遇到的一些样式需求:
    1.对网格线样式修改;
    2.对坐标轴线,文字的样式修改;
    3.对图例组件legend样式的修改;
    4.对折线样式的修改;
    5.y轴单位样式.

    样式展示:
    在这里插入图片描述
    代码:

    var chartDom = document.getElementById('main');
    var echart = echarts.init(chartDom, 'dark'); //dark ,深色主题
    var option = {
      tooltip: {
        trigger: 'axis',
      },
      color: ['#0078ff', '#00ffcc'], //两条折线的颜色
      legend: {
        data: [
          {
            name: '隐患排查',
            icon: 'circle', // 图例的图标样式
            /*
            这个图标样式我在官网上只找到了实心圆,或者空心圆加一条横线,我们设计图上要求是空心圆,
            我暂时不知道要怎么做,如果有朋友知道,可以告诉我.
    */ 
          },
          {
            name: '治理数',
            icon: 'circle',
          },
        ],
        top: '10%',
        right: '10%',
        textStyle: { //图例的文字样式
          color: '#fff',
        },
      },
    
      xAxis: {
        type: 'category',
        boundaryGap: true,
        data: ['2月28', '3月01', '3月02', '3月03', '3月04', '3月05', '3月06'],
        // 轴线的字体样式
        axisLabel: {
          show: true,
          textStyle: {
            color: '#fff',
            fontSize: '0.16rem',
            // fontSize: 16, 可直接写数字,单位px
          },
        },
        // 轴线的样式
        axisLine: {
          lineStyle: {
            color: '#273169',
          },
        },
        // 网格线样式
        splitLine: {
          show: true,
          lineStyle: {
            color: ['#273169'],
          },
        },
        axisTick: {
          show: false, // 不显示坐标轴刻度
        },
      },
      yAxis: {
        type: 'value',
        name: '个', // y轴的单位,不写就没有
        nameTextStyle: { //单位'个'的样式
          color: '#fff',
          padding: [0, 0, 0, -56], // 用来移动单位的位置对齐
        },
        axisLabel: { 
          show: true,
          textStyle: {
            color: '#fff',
            fontSize: '0.16rem',
          },
          margin: 18, //轴线上的文字与线的距离
        },
        axisLine: {
          lineStyle: {
            color: '#273169',
          },
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: ['#273169'],
          },
        },
      },
      series: [
        {
          name: '隐患排查',
          type: 'line',
          data: [34, 44, 35, 38, 41, 37, 39],
          // symbol:'none',
          /*
    symbol:拐弯的那个节点的样式
    值:'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
    具体啥样子,我每次都是挨个试的.
    */
          areaStyle: { // 要加这个属性,折线与下方的区域才能填充颜色
            // color: 'red', // 可以直接填充颜色
            color: { // 这边是设置渐变色,好看一点
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: 'rgba(0,156,255,0.5)',
                },
                {
                  offset: 0.5, //这是于下方线的距离,设置1就不留空隙
                  color: 'rgba(0,156,255,0)',
                },
              ],
              global: false,
            },
          },
        },
        {
          name: '治理数',
          type: 'line',
          data: [18, 21, 15, 20, 10, 18, 12],
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: 'rgba(0,255,133,0.5)',
                },
                {
                  offset: 0.9,
                  color: 'rgba(0,255,133,0)',
                },
              ],
              global: false,
            },
          },
        },
      ],
    }
    echart.setOption(option)
    
    展开全文
  • 最近通过poi实现了一整套由 07版excel生成折线图、柱状图及混合双轴图形,本文将记录折线图中的关于图例、标题、坐标轴的各种样式。其中包括颜色、字体、粗细、虚实等。直接上代码吧 package ...
  • echart---折线图样式处理

    千次阅读 2018-11-22 10:01:06
    这里主要是对折线图的一下默认样式进行处理,主要修改以下属性: 1、grid--控制图标与canvas的留白区域,legend放在左边,grid.x要预留legend的宽度  2、xAxis、yAxis---主要对x轴和y轴的样式做了调整  (1)y轴-...
  • 折线图为例。最终呈现的效果是这样的 在最外层可以设置,距离外层box的距离 myChart.setOption({ grid: { //距离外层box左右位置 x: 30,//左 y: 45,//上 x2: 45,//右 y2: 40,//下 borderWidth: 1, }, }...
  • 折线图hover 时拐点大小不变;hover时拐点内空心点填充为实心,定义拐点颜色,边框线大小以及颜色等,下面简单演示修改拐点样式: option = { title: { text: '堆叠区域图' }, tooltip : { trigger: 'axis', ...
  • 一、echarts 折线图(折线统计图) 折线图在我们也是我们的数据可视化图表中最常用的一种图表之一,是用折线将各个数据点标志连接起来的图表,不仅可以表示数量的多少,而且可以反映同一事物在不同时间里的发展变化的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 963
精华内容 385
关键字:

折线图样式