echart 初始配置详解

本文章记录项目中的echart的使用
1.npm安装

npm install echarts --save

2.项目文件中引用

import echarts from 'echarts'

3.初始化echart实例

<div ref="lineChart" style="height: 400px;width: 98%;"></div>
this.chart = echarts.init(this.$refs.lineChart)

4.绘制图标（参数详解）
echart的实例上有一个setOption方法需要传入一个对象，对象中的每一个key是你所绘制图表的配置项，value是配置项对应的值。
以线性图为例：

chart.setOption({
    title: {
        text: '图表名称'
    },
    // 图表提示框配置
    tooltip: {
		axisPointer: {//坐标轴指示器配置项
           type: 'line'//直线指示器
        },
        //提示框位置设置
        position: function (pos, params, dom, rect, size) {
            // 鼠标在左侧时 tooltip 显示到右侧，鼠标在右侧时 tooltip 显示到左侧。
            var obj = {top: 0};
            obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;
            return obj;
        },
        //提示框内容设置
        formatter:function (params){//params是每个x轴对应y轴的所有数据
             let str= params[0].axisValue.indexOf('第') === -1?moment(params[0].axisValue).format('YYYY-MM-DD') +"</br>": params[0].axisValue+"</br>"
             for (const iterator of params) {
                 str = str+ iterator.marker+""+iterator.seriesName + ': ' + iterator.value + self.unit +"</br>" 
             }
             return  str ;
         }
	},
	grid: {//grid 组件离容器的距离
        top: 30,
        left: 60,
        bottom: 70,
        right: 60
    },
	legend: {//线性图：几种线条
		//线条位置配置
        x: 'center', // 'center' | 'left' | {number},
        y: 'top', // 'center' | 'bottom' | {number}
        bottom: 10,
        type: 'scroll',
        data: this.lineData.cateName//线条名称
    },
    xAxis: {//直角坐标系的x轴
    	//数据一般是后端返回，前端要把这个数据做处理，需要x轴显示什么就把对应的数据push到数组里
        data: []//x轴的数据
    },
    yAxis: {//直角坐标系 grid 中的 y 轴
        type: 'value',//坐标轴类型，这里是数值轴
        axisLabel: {//坐标轴刻度标签的相关设置
            formatter: function (value) {
                let text = ''
                if (self.unit === '%') {
                    text = value + self.unit
                } else {
                    text = value
                }
                return text
            }
        },
        min: self.yMin //坐标轴刻度最小值
    },
   dataZoom: [{//用于区域缩放，能自由关注数据信息
            type: 'inside',//内置型数据区域缩放组件（平移和缩放）
            start: 0,//数据窗口范围的起始百分比
            end: 100,//数据窗口范围的结束百分比
            zoomOnMouseWheel: 'ctrl'//如何触发缩放
        },
        {//滑动条型数据区域缩放组件
            show: true,
            type: 'slider',
            y: '90%',
            start: 50,//数据窗口范围的起始百分比
            end: 100
        }
    ],
    series: this.seriesList()//折线图上的数据
});

图标数据处理

//这里会对数据做处理
seriesList () {
     let list = []
     for (const key in this.lineData.series) {
         list.push({
             name: key,
             type: 'line',//类型
             data: this.lineData.series[key],
             label: {//当前数据点是否显示数据
                 show: false
             },
             itemStyle: {
                 normal: {
                     lineStyle: {
                         color: color[key], //改变折线颜色
                     }
                 }
             },
         })
     }
     return list 
 }

成表展示：

链接: 参考资料