Echarts图表的使用小结

起点

这里请求初始数据，可能会有挂载问题

初始化

给div id
const chart = this.$echarts.init(this.$refs[id]);
或者
给div ref
const chart = this.$echarts.init(document.getElementById(id));
将图渲染到指定区域
chart.setOption(this.getOption(id));

数据尚未获取，渲染失败

异步请求执行顺序低，而JS是单线程模型，若二者分开则在按照created -> initEcharts顺序，此时因为同步操纵优先级高，尚未得到数据便开始渲染，渲染失败
then异步操作，等待其他同步操作完成之后，在执行此处（）内部方法,同步优先级》异步优先级底， initEcharts变为异步内的方法，最后执行，先执行数据拉取

 getChartData().then(resp=>{
	在这里初始化echarts
}

title

图名

xAxis X坐标轴

name 坐标轴名称

坐标轴名称位置
nameLocation: 'end', 
坐标轴名称偏移角度
nameRotate: -75,

axisLabel 标签值

axisLabel: {
            rotate: 45, //坐标轴名字刻度值偏移值，数据较多设置，可完全展示
          },

boundaryGap: true //边幅间距，控制在中心

data 标签值来源

data: Monthly.map(dd => {return dd})

type: ‘category’ 目录类型

yAxis y坐标轴

y轴线相关

gredIndex y轴线索引，多个设置对应的数据显示到Y轴线，依据于此

type: ‘value’ 数据轴线

axisLine 轴线是否显示

axisTick 刻度标签是否显示

splitNumber 分割段数

min max最小最大值，给定数值和函数设置效果不同，推荐函数

		gredIndex: 0,
		 position: 'left',
            type: 'value',
            axisLine: {
              show: true
            },
            axisTick: {
              show: true,//刻度线
            },
            min: function () {
              return 15000;
            },
            splitNumber: 6,//从数值最大的整数开始划分，最小的部分切割给min

series 数据集

动态获取数据集

title y轴线名称

name 数据名称

type: ‘line’ 折线/堆叠折线（多条线在同一个图中）

data 数据值

yAxisIndex 多Y轴线指定

stack ,此属性在堆叠折线图导致设置MINMAX之后可能无法正常显示

数据堆叠，同个类目轴上系列配置相同的 stack 值可以堆叠放置

Function () {

 var series = [];
 let sd = {

          title: "月份",
          name: m,
          type: 'line',
          // stack: 'Total',此属性会导致设置MINMAX之后无法正常显示
          data: ms,
          yAxisIndex: m ==="XX"?1:0,//独用一轴线

        };

        series.push(sd);
}

tooltip 显示配置

formatter参照官方

tooltip: { //鼠标悬浮显示数据及格式
              textStyle: {
                color: "#fff",
              },
              backgroundColor: "rgba(122, 119, 119, 0.79)",
              borderColor: "rgba(122, 119, 119, 0.79)",
              formatter: '<div style="text-align: center">数量</div>{b}:{c}&nbsp;({d}%)',//官方用法
            },

legend 图例

data 可以设置Fun动态获取