记录vue使用echarts制作折线图

最近需要在vue2内制作折线图，在这里记录一下制作折线图的个人总结（vue怎么引入echarts请去其他教程）

Echats图表配置项地址：Documentation - Apache ECharts

效果：

第一步：准备div容器

      <div ref="chart" style="width: 800px;height:400px;"></div>复制

第二步：拿到上述dom并配置生成图表

      // 1 、基于准备好的容器初始化echarts实例对象
      let eChartsType = this.$echarts.init(this.$refs.chart)
      // 2 、指定图表的配置项和数据
      let option = {
        grid: {
          // 调整距离
          left: '5%', // 左
          right: '5%', // 右
          bottom: '3%', // 下
          top: '40px', // 上
          containLabel: true, // 是否包括标签
          borderWidth: 1, // 边框宽度（前提是设置了show: true）
          show:true, // 是否展现
        },
        // 标题设置
        title: {
          text: '效益有效性分析', // 标题内容
          left: 'center'
        },
        // X轴
        xAxis: {
          show: false, // 是否展示
          type: 'category', // 类型 value为数值，category为类目轴（通俗的就是字符串），time为实践轴
          name: '公司名称', // X轴名称
          nameLocation:'end', // X轴位置
          boundaryGap: true, // X轴是否从不零开始，true为不从零开始
          data: dmu, // X轴数据
          // x轴线的设置
          axisLine: {
            lineStyle: {
              color: '#312f2f', // 颜色
              width: 2 // 粗细
            }
          },
          // 标签设置
          axisLabel:{
            show: false
          }
        },
        // Y轴信息设置
        yAxis: {
          type: 'value', // 类型
          name: '效率值',// Y轴名称
          nameLocation: 'end', // 位置
        },
        // 图例组件
        legend: {
          data: ['综合效益', '技术效益', '规模效益'], // 图例的数据数组
          left: 'right', // 位置
          top: 0 // 距离图上方的距离
        },
        // 工具栏
        toolbox: {
          show: false, // 因为这没用到所以就给撤了
          feature: {
            saveAsImage: {} // 设置保存为图片,右上角会右一个下载的按钮
          }
        },
        // 提示框组件
        tooltip: {
          show: true,
          trigger: 'axis', // 触发类型 axis 坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
          // 坐标轴指示器配置项
          axisPointer: {
            type: 'cross', // 十字准星指示器
            // 设置label
            label: {
              backgroundColor: '#6a7985' // 设置背景颜色
            }
          }
        },
        series: [{
          // 以下类同
          name: '综合效益', // 折线名称
          data: te,// 数据
          type: 'line', // 类型
          // 设置出现最大最小值提示
          markPoint: {
            data: [
              { type: 'max', name: 'Max' },
              { type: 'min', name: 'Min' }
            ]
          },
          // 设置出现平均值
          markLine: {
            data: [{ type: 'average', name: 'Avg' }]
          }
        },
          {
            name: '技术效益',
            data: pte,
            type: 'line',
            markPoint: {
              data: [
                { type: 'max', name: 'Max' },
                { type: 'min', name: 'Min' }
              ]
            },
            markLine: {
              data: [{ type: 'average', name: 'Avg' }]
            }
          },
          {
            name: '规模效益',
            data: se,
            type: 'line',
            markPoint: {
              data: [
                { type: 'max', name: 'Max' },
                { type: 'min', name: 'Min' }
              ]
            },
            markLine: {
              data: [{ type: 'average', name: 'Avg' }]
            }
          }]
      }
      eChartsType.setOption(option); // 设置Option
    },复制