【echarts实用技巧】echarts图表常用功能总结,折线图柱状图折柱混合【持续更新中】

主要用折线图和柱状图举例

1,X轴刻度信息日期自动排开:

我们获取一个日期的开始时间和结束时间,放上去会自动生成中间每一天的日期放在X轴上
把这两个函数放methods内。

getAll(begin, end) {
            let arr1 = begin.split("-");   //这里可以换成/  就2020/01/1 这种
            let arr2 = end.split("-");
            let arr1_ = new Date();
            let arrTime = [];
            arr1_.setUTCFullYear(arr1[0], arr1[1] - 1, arr1[2]);
            let arr2_ = new Date();
            arr2_.setUTCFullYear(arr2[0], arr2[1] - 1, arr2[2]);
            let unixDb = arr1_.getTime();
            let unixDe = arr2_.getTime();
            for (let k = unixDb; k <= unixDe;) {
                arrTime.push(this.datetimeparse(k, 'YY-MM-DD'));
                k = k + 24 * 60 * 60 * 1000;
            }
            return arrTime;
        },
        // 时间格式处理
        datetimeparse(timestamp, format, prefix) {
            if (typeof timestamp == 'string') {
                timestamp = Number(timestamp)
            };
            //转换时区
            let currentZoneTime = new Date(timestamp);
            let currentTimestamp = currentZoneTime.getTime();
            let offsetZone = currentZoneTime.getTimezoneOffset() / 60; //如果offsetZone>0是西区,西区晚
            let offset = null;
            //客户端时间与服务器时间保持一致,固定北京时间东八区。
            offset = offsetZone + 8;
            currentTimestamp = currentTimestamp + offset * 3600 * 1000
        
            let newtimestamp = null;
            if (currentTimestamp) {
                if (currentTimestamp.toString().length === 13) {
                    newtimestamp = currentTimestamp.toString()
                } else if (currentTimestamp.toString().length === 10) {
                    newtimestamp = currentTimestamp + '000'
                } else {
                    newtimestamp = null
                }
            } else {
                newtimestamp = null
            };
            let dateobj = newtimestamp ? new Date(parseInt(newtimestamp)) : new Date()
            let YYYY = dateobj.getFullYear()
            let MM = dateobj.getMonth() > 8 ? dateobj.getMonth() + 1 : '0' + (dateobj.getMonth() + 1)
            let DD = dateobj.getDate() > 9 ? dateobj.getDate() : '0' + dateobj.getDate()
            let HH = dateobj.getHours() > 9 ? dateobj.getHours() : '0' + dateobj.getHours()
            let mm = dateobj.getMinutes() > 9 ? dateobj.getMinutes() : '0' + dateobj.getMinutes()
            let ss = dateobj.getSeconds() > 9 ? dateobj.getSeconds() : '0' + dateobj.getSeconds()
            let output = '';
            let separator = '/'
            if (format) {
                separator = format.match(/-/) ? '-' : '/'
                output += format.match(/yy/i) ? YYYY : ''
                output += format.match(/MM/) ? (output.length ? separator : '') + MM : ''
                output += format.match(/dd/i) ? (output.length ? separator : '') + DD : ''
                output += format.match(/hh/i) ? (output.length ? ' ' : '') + HH : ''
                output += format.match(/mm/) ? (output.length ? ':' : '') + mm : ''
                output += format.match(/ss/i) ? (output.length ? ':' : '') + ss : ''
            } else {
                output += YYYY + separator + MM + separator + DD
            }
            output = prefix ? (prefix + output) : output
        
            return newtimestamp ? output : ''
        }

然后调用传入开始时间和结束时间就可以了。
我这里aa和bb是我自己定的开始和结束的时间变量。topGraph是图表,把timearr传参进去,放在X轴的data后面就行了。

mounted() {
    //把起始结束日期放进去,计算出中间所有日期
    let timearr = this.getAll(this.aa, this.bb);
    //参数传给echarts图渲染出来X轴
    this.topGraph(timearr);
  },

2,Y轴左右双轴:Y轴左边有一排数字,右边也有一排

这样写就行。

yAxis: [
          {
            type: "value",
            min: 0, //最小
            max: 400,//最大值
            interval: 100,//间隔多少
            axisLabel: {
              formatter: "{value} ",
            },
          },
          {
            type: "value",
            min: 50,
            max: 110,
            interval: 20,
            axisLabel: {
              formatter: "{value} ",
            },
          },
        ],

3,Y轴添加百分比

yAxis: [
          {
            type: "value",
            min: 0,
            max: 300,
            interval: 50,
            axisLabel: {
              formatter: "{value} ",
            },
          },
          {
            type: "value",
            min: 30,
            max: 90,
            interval: 20,
            axisLabel: {
              formatter: "{value}"+'%',//这个地方加个百分比符号拼接就行,这是加在Y轴右边的。如果想要Y轴左边就加上面
            },
          },
        ],

4,series数据加百分比后缀

添加formatter,符号的意思参考官方文档

tooltip: {
          trigger: "axis",
          formatter:
            "{b0}
{a0}: {c0}%
{a1}: {c1}%
{a2}: {c2}
{a3}: {c3}"
, },

5,title的位置更改

title: {
          text: "趋势图",
          left: "center",调title位置,可以右中右,也可以给数字,改值就行。
          //left:20   //这种是给数字的
        },

6,legend的位置更改

跟上面一样的,不多说

legend: {
          data: ["调整前", "调整后"],
          left: 10,
          top: 30,
        },

7,改变图表大小

可以用数字和百分比

grid: {
          left: "3%",
          right: "4%",
          bottom: 80,
          containLabel: true,
        },

8,图表自适应

放在myChart.setOption(option);下面就行了,然后给你的盒子设置自适应,如果定死了宽高还是不能自适应的

//监听,根据视口变化动态从新渲染表格
      window.addEventListener("resize", function () {
        myChart.resize();
      });

9,X轴刻度信息倾斜

xAxis: {
          type: "category",
          boundaryGap: false,
          //X轴刻度信息
          data: ["9月","10月"],
          axisLabel: {
            interale: 0, //坐标轴刻度标签的显示间隔,设置成 0 强制显示所有标签
            rotate: 40, //设置日期显示样式(倾斜度)还可以负值
          },
        },

10,节点数值默认显示

series: [
          {
            name: "检测数量",
            type: "bar",
            data: [220, 229,234],
            //加一个这个label就可以了。按这个设置。
            label: {
              show: true,
              formatter: function (data) {
                return data.value;
              },
            },
          },]

11,折线图变虚线显示

添加lineStyle部分

series: [
          {
            name: "检测数量",
            type: "bar",
            data: [220, 229,234],
            //加一个这个lineStyle就可以了。按这个设置。
            lineStyle: {
              color: "#FF0000",
              width: 2,
              type: "dashed",
            },
            },
          },]

12,折线和柱子的颜色

直接加color就行,几个数据条就对应几个颜色,按顺序对应

 var option = {
        color: ["#f8cbad", "#a5a5a5", "#636363","#4472c4", "#ffe699"],
        }

13,折线图节点实心和节点大小改变

如果symbolSize改成0就不显示节点了。

series: [
          {
            name: "检测数量",
            type: "bar",
            data: [220, 229,234],
            //这两个,上面是实心,下面是大小
            symbol: "circle",
            symbolSize: 9,
            },
          },]

14,legend分行写法

这样就分了两行,并用bottom定好各自的位置别重叠了。可以自己改

legend: [
            {
                data: [
            "检测数量",
            "检测数量",
            "检测数量",
            "检测数量",
            "检测数量",
          ],
             bottom: 30,
            },
            {
                data: [
            "A级率",
            "A级率",
            "A级率",
            "A级率",
            "A级率",
            "平均 A级率",
          ],
            bottom: 10,
            }
        ],

15,柱状图和折线图共存图

series: [
        {
            name: '蒸发量',
            type: 'bar',
            data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
        },
        {
            name: '降水量',
            //bar是柱状图
            type: 'bar',
            data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
        },
        {
            name: '平均温度',
            //这个代表折线
            type: 'line',
            yAxisIndex: 1,
            data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
        }
    ]

16,折线依据右边Y轴数据

series: [
          {
            name: "检测数量",
            type: "bar",
            data: [220, 229,234],
            //添加这个就是根据右边的数值显示,如果删除就根据左边的显示
            yAxisIndex: 1,
          },]

17,toolbox五个按钮

toolbox: {
        feature: {
            dataView: {show: true, readOnly: false},
            magicType: {show: true, type: ['line', 'bar']},
            restore: {show: true},
            saveAsImage: {show: true}
        }
    },

18,鼠标移动上去出现提示框

tooltip: {
          trigger: "item",
        },

19,圆环图引导线位置放在外围

series内

position: "outside",

20,柱状图渐变色

series内

{
            type: "bar",
            showBackground: false,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#83bff6" },
                { offset: 0.5, color: "#188df0" },
                { offset: 1, color: "#188df0" },
              ]),
            },
            emphasis: {
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#2378f7" },
                  { offset: 0.7, color: "#2378f7" },
                  { offset: 1, color: "#83bff6" },
                ]),
              },
            },

21,柱状图宽度

series内

barWidth: 25,

22,柱状图自动排序,排序自动让Y轴名字跟着数据动

series内

realtimeSort: true,

23,让折线图变成曲线

在series中添加这个属性

smooth: true,

24,生成随机颜色

color里面的就是生成随机颜色的代码。注意这个引号是Esc下面的波浪号那个引号,也就是es6的模板字符串。

  series: [
    {
      name: 'Email',
      type: 'line',
      stack: 'Total',
      data: [120, 132, 101, 134, 90, 230, 210],
      color:`rgb(${Math.round(Math.random()*255)},${Math.round(Math.random()*255)},${Math.round(Math.random()*255)})`
    }
    ]

25,series循环生成数据

在外面先把后台给的数据拿到,处理成配置的格式,放入对应的数据,然后给到echarts里面赋值就行了。

    var series=[];    //定义一个数组变量用于存放配置
		//循环把数据放到对应的每一个配置项内。
    for(var i = 0;i<data.length;i++){
        series.push({
            name: data[i],
            type: 'line',
            stack: '总量',            
            data: data[i].data
        });
    }
	
    //把这个配置好的数组放到echarts内。
    series: series    //讲数组变量赋值即可

26,tooltip提示框内数值后加百分比

主要是这一句:formatter

        tooltip: {
          trigger: "axis",
          formatter: '{b0}
{a0}: {c0}%
{a1}: {c1}%'
},

27,两边留白

作用:可以用来让图表控制两侧的空白大小,比如柱状图排行榜横向,可能会出现太长了,后面的数字看不全的现象,那就可以用留白让图表缩短以此看全文字。
只需要在X轴加boundaryGap就行。

//X轴
        xAxis: {
          type: "value",
          boundaryGap: [0, 0.001]
        },

28,折线图下面添加颜色填充,渐变色效果

series内放这个就行了。

//区域填充样式
            areaStyle: {
              //图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
              opacity: 0.8,
              //填充的颜色
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  // 0% 处的颜色
                  offset: 0,
                  color: "rgba(128, 255, 165)",
                },
                {
                  // 100% 处的颜色
                  offset: 1,
                  color: "rgba(1, 191, 236)",
                },
              ]),
            },

29,for循环生成series时如何控制每一个线的颜色

这里2个方法,因为是循环生成的,我们没法一个个去添加color,那么就可以通过随机色给颜色,当然也有缺点,就是颜色无法控制,有的时候真的很丑。

第二种办法就是可以先定义一个color的颜色数组,然后循环的时候用这个数组,后面跟上循环的角标,这样就可以控制颜色顺序了,如果需要改变颜色就把对应角标的颜色还成想要的就行。

color:['#cccccc','#222222','#333333']
this.color[i]

30,多个X轴写法

代码较多解释一下:写法就是X轴用数组写,里面每个对象就是一条轴,其中lineStyle的color可以重置这个轴的颜色,data是这一条轴的刻度,offset是轴的偏移量,如果为0会和别的轴重叠起来看不到了。position: ‘bottom’,代表定位,如果不写会把多余的X轴放在图表的上面显示,如果写了就会定位到下面。我这边就是写了四个X轴全放在图的下面。axisPointer内的函数返回的是提示信息的。

  xAxis: [
    {
      type: 'category',
      axisTick: {
        alignWithLabel: true
      },
      
      axisLine: {
        onZero: false,
        lineStyle: {
          color: colors[1]
        }
      },
      axisPointer: {
        label: {
          formatter: function (params) {
            return (
              'Precipitation  ' +
              params.value +
              (params.seriesData.length ? ':' + params.seriesData[0].data : '')
            );
          }
        }
      },
      // prettier-ignore
      data: ['2016-1', '2016-2', '2016-3', '2016-4', '2016-5', '2016-6', '2016-7', '2016-8', '2016-9', '2016-10', '2016-11', '2016-12']
    },
    {
      type: 'category',
      axisTick: {
        alignWithLabel: true
      },
      offset:25,
      position: 'bottom',
      axisLine: {
        onZero: false,
        lineStyle: {
          color: colors[0]
        }
      },
      axisPointer: {
        label: {
          formatter: function (params) {
            return (
              'Precipitation  ' +
              params.value +
              (params.seriesData.length ? ':' + params.seriesData[0].data : '')
            );
          }
        }
      },
      // prettier-ignore
      data: ['2015-1', '2015-2', '2015-3', '2015-4', '2015-5', '2015-6', '2015-7', '2015-8', '2015-9', '2015-10', '2015-11', '2015-12']
    },
    {
      type: 'category',
      offset:45,
      axisTick: {
        alignWithLabel: true
      },
      position: 'bottom',
      axisLine: {
        onZero: false,
        lineStyle: {
          color: colors[0]
        }
      },
      axisPointer: {
        label: {
          formatter: function (params) {
            return (
              'Precipitation  ' +
              params.value +
              (params.seriesData.length ? ':' + params.seriesData[0].data : '')
            );
          }
        }
      },
      // prettier-ignore
      data: ['2335-1', '2335-2', '2235-3', '2335-4', '2335-5', '2335-6', '2015-7', '2015-8', '2015-9', '2015-10', '2015-11', '2015-12']
    },
    {
      type: 'category',
      axisTick: {
        alignWithLabel: true
      },
      position: 'bottom',
      offset:76,
      axisLine: {
        onZero: false,
        lineStyle: {
          color: colors[0]
        }
      },
      axisPointer: {
        label: {
          formatter: function (params) {
            return (
              'Precipitation  ' +
              params.value +
              (params.seriesData.length ? ':' + params.seriesData[0].data : '')
            );
          }
        }
      },
      // prettier-ignore
      data: ['3415-1', '3415-2', '3415-3', '3415-4', '3415-5', '3415-6', '2015-7', '2015-8', '2015-9', '2015-10', '2015-11', '2015-12']
    },
  ],

然后对应的就是series数据方面
这里重点注意是xAxisIndex这个词,他的作用就是对应X轴,没写就是默认第一条X轴,如果写了1代表第二个X轴,以此类推。

  series: [
    {
      name: 'Precipitation(2015)',
      type: 'line',
      xAxisIndex: 1,
      smooth: true,
      emphasis: {
        focus: 'series'
      },
      data: [
        2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
      ]
    },
        {
      name: 'Precipitation(2015)',
      type: 'line',
      xAxisIndex: 2,
      smooth: true,
      emphasis: {
        focus: 'series'
      },
      data: [
        1.6, 2.9, 3.0, 4.4, 5.7, 6.7, 7.6, 8.2, 9.7, 18.8, 6.0, 2.3
      ]
    },
    {
      name: 'Precipitation(2016)',
      type: 'line',
      smooth: true,
      emphasis: {
        focus: 'series'
      },
      data: [
        3.9, 5.9, 11.1, 18.7, 48.3, 69.2, 231.6, 46.6, 55.4, 18.4, 10.3, 0.7
      ]
    },
            {
      name: 'Precipitation(2015)',
      type: 'line',
      xAxisIndex: 3,
      smooth: true,
      emphasis: {
        focus: 'series'
      },
      data: [
        88, 88, 88, 88, 88, 6.7, 7.6, 8.2, 9.7, 18.8, 6.0, 2.3
      ]
    },
  ]

31,折线图断点如何链接

描述:有时候我们可能会数据中间有空的值,那折线图就会出现无法连线的情况,只有个点在那边。这时候重点是在series配置内加一句connectNulls: true就可以链接空数据了。

series: [{
        data: [820, 932, 901, '', 1290, 1330, 1320],
        type: 'line',
        areaStyle: {},
        connectNulls: true      //重点内容   
    }]

32,X轴刻度太多,显示不全处理方法

 xAxis : [
        {
            axisLabel: {
                interval:0,//代表显示所有x轴标签显示
            }
        }
    ],
 

但是这样显示会重叠在一起。可以加上角度让他能竖着显示看的清楚

axisLabel: {
                interval:0,//代表显示所有x轴标签显示
                rotate:45, //代表逆时针旋转45度
            }

你可能感兴趣的:(功能实现,前端,vue.js,echarts)