vue简单使用echarts

• 安装引入

// 安装Echats
npm install echarts --save
// 引入
import echarts from 'echarts'

• html部分

<div id="chartLineBox" style="width: 90%;height: 70vh;"></div>

• js部分

methods: {
            // 按需搜索
            search(formData) {                       
            //请求后台数据      
                countStatistics(formData).then((res) => {
                    this.dateList = [];
                    this.countData = [];
                    let arr = res.data.data;
                    // 调用方法生成
                    this.createEcharts(arr);
                })
            },
			成echarts表格
            createEcharts(data) {
                let arr = data;
                arr.forEach((item) => {
                    this.dateList.push(item.modifiedTime);
                    this.countData.push(item.resultCount);
                });      
                this.chartLine = echarts.init(document.getElementById('chartLineBox'));
                let _this = this;
                let option = {
                    legend: {               //设置区分（哪条线属于什么）
                        data: ['检验数量', '合格数量']
                    },
                    color: ['#e21335', '#0078c4'],       //设置区分（每条线是什么颜色，和 legend 一一对应）
                    tooltip: {
                        trigger: "axis"
                    },
                    grid: {
                        left: "3%",
                        right: "4%",
                        bottom: "3%",
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        name: '日期',
                        nameTextStyle: {
                            // color: '#FA6F53',
                            fontSize: 16,
                            padding: [0, 0, 10, 0]
                        },
                        type: "category",
                        boundaryGap: false,
                        // data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
                        data: _this.dateList
                    },
                    yAxis: {
                        name: '数量',
                        nameTextStyle: {
                            // color: '#FA6F53',
                            fontSize: 16,
                            padding: [0, 0, 10, 0]
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#000000',
                            }
                        },
                        type: "value"
                    },
                    series: [
                        {
                            name: '检验数量',
                            type: "line",
                            stack: "总量",
                            data: _this.countData
                        },                     
                    ]
                };
                this.chartLine.setOption(option);

            },
        },