vue中使用echarts记录属性

环境：vue2 + element-ui

echarts版本：5.4.0

安装：

npm install echarts --save

需要的页面引用：

import * as echarts from 'echarts';

针对于柱形图： 

<div id="main" :style="{width: '100%', height: 350 + 'px'}"></div>

// 设置容器以及数据配置 
getEcharts() {
      var myChart = echarts.init(document.getElementById("main"));
      myChart.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          data: ['车道1', '车道2', '车道3', '门架'],
          top: 10, // 距离顶部的位置
          textStyle: {
            color: '#fff' // 字体颜色
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: ["省内", "省外", "其他"],
            axisLabel: {
              // interval: 0,
              // rotate: 45, //避免X轴数据太长 倾斜度 -90 至 90 默认为0
              // margin: 2,
              textStyle: {
                fontWeight: "bolder",
                color: "#fff",
              },
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            name: '车道/个',
            nameTextStyle: {
              color: "#fff",
              fontSize: 12,
            },
            splitLine: {
              show: true,
              lineStyle: { // 设置线的样式
                type: 'dashed',
                color: 'rgba(255,255,255,0.3)'
              }
            },
            axisLabel: {
              formatter: '{value}',
              textStyle: {
                fontWeight: "bolder",
                color: "#fff",
              },
            }
          },
          {
            type: 'value',
            name: '门架/个',
            nameTextStyle: {
              color: "#fff",
              fontSize: 12,
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed',
                color: 'rgba(255,255,255,0.3)'
              }
            },
            axisLabel: {
              formatter: '{value}',
              textStyle: {
                fontWeight: "bolder",
                color: "#fff",
              },
            }
          }
        ],
        series: [
          {
            name: "车道1",
            type: "bar",
            barWidth: '20%', // 柱状图柱子的宽度
            stack: "Ad", // stack值相同则堆叠
            emphasis: {
              focus: "series",
            },
            data: this.arrY1, // 数据源
            itemStyle: {
              color: '#287CE7' // 柱状图的颜色
            },
          },
          {
            name: "车道2",
            type: "bar",
            barWidth: '20%',
            stack: "Ad",
            emphasis: {
              focus: "series",
            },
            data: this.arrY2,
            itemStyle: {
              color: '#30C6DC'
            },
          },
          {
            name: "车道3",
            type: "bar",
            barWidth: '20%',
            stack: "Ad",
            emphasis: {
              focus: "series",
            },
            data: this.arrY3,
            itemStyle: {
              color: '#F4CF3D'
            },
          },
          {
            name: "门架",
            type: "bar",
            yAxisIndex: 1, // k开启双y轴
            barWidth: '20%',
            data: this.arrY4,
            emphasis: {
              focus: "series",
            },
            itemStyle: {
              color: '#7B6DFE'
            },
          }
        ],
      });
// 图标自适应
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    getData() {
      const obj = { }
// 获取数据
      getData(obj).then(res => {
        const { code, data } = res
        if (code != '200') {
          return
        }
        this.data= data
        const arrY1 = []
        const arrY2 = []
        const arrY3 = []
        const arrY4 = []
       // 将数据对应放进去
        this.arrY1 = arrY1
        this.arrY2 = arrY2
        this.arrY3 = arrY3
        this.arrY4 = arrY4
        this.getEcharts();
      })
    },

效果图

 

折线图的一些属性

// 折线面积渐变
series: [
          {
            name: "名字1",
            type: "line",
            // stack: "Total",
            areaStyle: {},
            data: this.arrY1,
            symbol: "none", //这句就是去掉点的
            smooth: true, //这句就是让曲线变平滑的
            areaStyle: {
              //区域填充渐变颜色
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(39,115,208,0.2)",
                },
                {
                  offset: 1,
                  color: "rgba(53,181,251,0)",
                },
              ]),
            },
          },
          {
            name: "名字2",
            type: "line",
            // stack: "Total",
            areaStyle: {},
            data: this.arrY2,
            symbol: "none", //这句就是去掉点的
            smooth: true, //这句就是让曲线变平滑的
            areaStyle: {
              //区域填充渐变颜色
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(35,222,216,0.2)",
                },
                {
                  offset: 1,
                  color: "rgba(53,181,251,0)",
                },
              ]),
            },
          },
          {
            name: "名字3",
            type: "line",
            // stack: "Total",
            areaStyle: {},
            data: this.arrY3,
            symbol: "none", //这句就是去掉点的
            smooth: true, //这句就是让曲线变平滑的
            areaStyle: {
              //区域填充渐变颜色
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(255,230,60,0.2)",
                },
                {
                  offset: 1,
                  color: "rgba(53,181,251,0)",
                },
              ]),
            },
          },
        ],

下一篇整理饼状图与环形图，3D柱状图

工作记录，有不足之处还请见谅，还望指出，感谢！