echarts入门

1.安装echarts

npm install echarts --dev 出现"echarts": “4.2.1”,表示安装成功；

2.在main.js引入echarts

import echarts from ‘echarts’;

3.echarts挂载到全局

Vue.prototype.$echarts = echarts;

4.init初始化表格

let echart_channel_2 = this.$echarts.init(document.getElementById(‘echart_channel_2’));

5.数据

[{
	"name": "名称1",
	"type": "line",
	"smooth": true,
	"label": {
		"normal": {
			"show": false,
			"position": "top",
			"formatter": "{@score}"
		}
	},
	"data": [0, 0, 0, 12606.72, 5864.68, 1560.08, 207.16, 6754.56, 1200.08, 82146.41, 950.14, 280.25],
	"barMaxWidth": 15,
	"barMinWidth": 10
}, {
	"name": "名称2",
	"type": "line",
	"smooth": true,
	"label": {
		"normal": {
			"show": false,
			"position": "top",
			"formatter": "{@score}"
		}
	},
	"data": [0, 12565.06, 2380.13, 119326.27, 87134.24, 18865, 0, 14588.05, 22351.9, 36904.9, 4070.1, 8692.12],
	"barMaxWidth": 15,
	"barMinWidth": 10
}, {
	"name": "名称3",
	"type": "line",
	"smooth": true,
	"label": {
		"normal": {
			"show": false,
			"position": "top",
			"formatter": "{@score}"
		}
	},
	"data": [0, 0, 0, 6420, 1500, 0, 0, 0, 0, 0, 0, 0],
	"barMaxWidth": 15,
	"barMinWidth": 10
}, {
	"name": "名称4",
	"type": "line",
	"smooth": true,
	"label": {
		"normal": {
			"show": false,
			"position": "top",
			"formatter": "{@score}"
		}
	},
	"data": [0, 0, 0, 0, 1350, 0, 0, 4050, 7700, 14500, 0, 0],
	"barMaxWidth": 15,
	"barMinWidth": 10
}, {
	"name": "名称5",
	"type": "line",
	"smooth": true,
	"label": {
		"normal": {
			"show": false,
			"position": "top",
			"formatter": "{@score}"
		}
	},
	"data": [0, 0, 0, 0, 0, 0, 0, 0, 2600, 0, 0, 0],
	"barMaxWidth": 15,
	"barMinWidth": 10
}]

name:这5个名字在表格下面显示；
data：这是每个数据在10个横坐标上的纵坐标的高度
type：表类型 line 折线图

5.设置一个对象

let option = {
          tooltip: {//这是点击坐标轴提示信息
            trigger: 'axis',
            formatter: function (params) {
              let str = '';
              for (let i = 0; i < params.length; i++) {

                str += `${params[i].seriesName}: ${params[i].value}${yAxisName.slice(1, 2)}` + '<br/>'
              }
              return params[0].name + '<br/>' + str
            },
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow',    // 默认为直线，可选为：'line' | 'shadow',
              shadowStyle:{
                color: 'rgba(255,160,0,0.2)'
              },
              label: {
                show: false,
                formatter: '{value}'
              }
            }
          },
          legend: {//这是表格下面的内容
            data: that.channelItemKey,
            icon:'roundRect', itemWidth: 15,itemHeight: 10,textStyle:{
              color:'#BDB7AE'
            },
            bottom: '5%'
          },
          grid: {//控制上下左右的位置
            left: '5%',
            right: '10%',
            bottom: '45%',
            top: '11%',
            containLabel: true
          },
          xAxis: {//x轴相关内容
            type: 'category',
            data: xArray,
            //["201912", "202001", "202002", "202003", "202004", "202005", "202006", "202007", "202008", "202009", "202010", "202011"]这是横坐标的值
            axisLabel: {
              color: '#BDB7AE',
              // interval: 0,
              rotate: -45,
              //倾斜度 -90 至 90 默认为0  
              margin: 10
            },
            axisTick: {
              show: false
            },
            axisLine: {
              onZero: false,
              lineStyle: {
                color: '#EEEEEE',
                fontSize: '100%',
              }
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: '#eeeeee',
                type: 'dashed'
              }
            },
          },
          yAxis: {//y轴相关内容
            type: 'value',
            name: yAxisName,// 这是y轴的单位 let yAxisName = '(元)';
            nameLocation: "end",
            axisLabel: {
              // interval: 0,
              // rotate: 45,
              //倾斜度 -90 至 90 默认为0  
              margin: 10,
              color: '#BDB7AE',
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false,
              onZero: false,
              lineStyle: {
                color: '#EEEEEE',
                fontSize: '100%',
              }
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: '#eeeeee',
                type: 'dashed'
              }
            },
          },
          series: seriesData
        };

legend --textStyle 这是表格下面的字体颜色

6.绘画表格

对象的添加颜色：
option.color =["#FE4C57", “#FF790D”, “#FFDB3E”, “#A7E32D”, “#6CCC58”, “#2AE2AD”, “#1EC0FF”, “#0C93FF”, “#394BFF”, “#8F1FFF”, “#D82186”]
绘制表格
echart_channel_2.setOption(option, true);