vue中如何使用echarts——以折线图为例

前言：最重要的第一步：安装echarts

npm install echarts --save

其他安装方式请到echarts官网查看

一、引入折线图

利用ref获取div容器

1.先准备一个容器

2.在mounted钩子函数中书写以下代码

import * as echarts from 'echarts';
mounted(){
let psgTimeOption = {
      title: {
        left: 'center',
        text: '旅客时间分布',
        textStyle: {
          color: '#fff',
          fontSize: 35,
          fontWeight: 'normal'
        }
      },
      // 设置折线图的位置
      grid: {
        x: 50,
        y: 90,
        x2: 30,
        y2: 30
      },
      // 设置折线图的位置
      xAxis: {
        type: 'category',
        boundaryGap: false,
        axisLabel: {
          interval: 0,
          fontSize: 20
        },
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
      },
      yAxis: {
        name: '人次',
        // y轴名称的位置
        nameTextStyle: {
          align: "right",
          fontSize: 20
        },
        type: 'value',
        min: 0,
        max: 100,
        // 只能设置偶数
        splitNumber: 6,
        axisLabel: {
          fontSize: 20
        }
      },
      series: [
        {
          data: [15, 23, 22, 21, 13, 17, 60, 22, 21, 13, 17, 60],
          type: 'line',
          // symbol: 'circle',     //设定为实心点
          symbolSize: 15,   //设定圆圈的大小

        }
      ]

    }
    // 传递一个dom元素
    let psgTimeCharts = echarts.init(this.$refs.psgTime)
    //传入一个配置项
    psgTimeCharts.setOption(psgTimeOption)
}

3.部分说明
axisLabel 可以设置x、y轴刻度上文本的样式，如大小、颜色、字体样式;
boundaryGap 是两侧留白，决定着文字是否在刻度中间还是在刻度正下方；

利用 id 获取容器

二、把折线图拐点设置成图片样式

1.先引入图片

import chart_circle from '../../assets/images/section_right/chart_circle.png';

2.然后定义变量（如果在另一个文件定义这个变量，要记得使用export default 导出）

const chartCircle = 'image://' + chart_circle;

3.最后使用变量

 symbol: chartCircle

效果展示：

参考文章

三、给折线图设置背景颜色

1.单一背景色

markArea 里的 itemStyle 属性，如果需要分别设置颜色就将itemStyle属性写到markArea下对应data里

2.渐变背景色

（1）给data里所有选中区域设置背景颜色

效果如下

（2）分别给每一块区域设置背景颜色

代码如下：

series: [
    {
      name: 'Electricity',
      type: 'line',
      smooth: true,
      // prettier-ignore
      data: [300, 280, 250, 260, 270, 300, 550, 500, 400, 390, 380, 390, 400, 500, 600, 750, 800, 700, 600, 400],
      markArea: {
        data: [
          [
            {
               itemStyle: {
                    color: {
                      type: 'linear',
                      x: 1,//右
                      y: 0,//下
                      x2: 0,//左
                      y2: 0,//上
                      colorStops: [{
                        offset: 0, color: 'red' // 0% 处的颜色
                      }, {
                        offset: 1, color: 'blue' // 100% 处的颜色
                      }],
                      global: false // 缺省为 false
                    }
                  },
              name: 'Morning Peak',
              xAxis: '07:30'
            },
            {
              xAxis: '10:00'
            }
          ],
          [
            {
               itemStyle: {
                    color: {
                      type: 'linear',
                      x: 0,//右
                      y: 1,//下
                      x2: 0,//左
                      y2: 0,//上
                      colorStops: [{
                        offset: 0, color: 'red' // 0% 处的颜色
                      }, {
                        offset: 1, color: 'rgba(0, 0, 0, 0.8)' // 100% 处的颜色
                      }],
                      global: false // 缺省为 false
                    }
                  },
              name: 'Evening Peak',
              xAxis: '17:30'
            },
            {
              xAxis: '21:15'
            }
          ]
        ]
      }
    }
  ]

echarts在线测试

点击 文档==》配置项手册==》series==》itemStyle==》color
其中x,y,x2,y2分别代表右边、下边、左边、上边, x:0, y:1, x2:0, y2:0表示颜色从下边开始


四、补充内容
由于整个页面进行了zoom：0.5缩放，导致折线图点击事件出现问题。
只需要在折线图所在div书写zoom：2，并且把所有数据都缩小两倍（宽高、具体配置项等）