echarts--多条曲线图--vue 效果图：

71 阅读 0 评论 47 点赞

我是靠谱客的博主调皮西装，这篇文章主要介绍echarts--多条曲线图--vue 效果图：，现在分享给大家，希望可以做个参考。

效果图：

复制代码

1
2
<div id="chartmainbar"></div>

复制代码

1
2
3
4
5
#chartmainbar{
    width: 75%!important;
    height:330px!important;
    float: left;
}

复制代码

optionbarline: {
          title: {
              text: '按变更时间统计变更次数',
              x: '10px',
              // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
              y: '0px',
              // itemGap设置主副标题纵向间隔，单位px，默认为10，
              itemGap: 20,
              backgroundColor: '#EEE',
              // 主标题文本样式设置
              textStyle: {
                fontSize: 16,
                fontWeight:'500',
                color: '#000000'
              },
          },
          legend: {
              data: ['新增', '修改', '删除'],
              x: 'right',
              // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
              y: 'top',
              textStyle: {
                color: '#666'  // 图例文字颜色
              },
          },
          tooltip: {
              trigger: 'axis',
              axisPointer: {
                  type: 'cross',
                  label: {
                      backgroundColor: '#6a7985'
                  }
              }
          },
          xAxis: {
              type: 'category',
              boundaryGap: false,
              axisLine: {
                  show: false
              },
              data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月','8月', '9月', '10月', '11月', '12月']
          },
          yAxis: {
              type: 'value',
              axisLine: {
                  show: false
              },
          },
          series: [{
              name:'新增',
              data: [820, 932, 901, 934, 1290, 1330, 1320,780,880,560,120,450],
              type: 'line',
              smooth:true,
              symbol:'none'
          },
          {
              name:'修改',
              data: [720,732, 901, 974, 1290, 1330, 1320,990,1300,1100,880,650],
              type: 'line',
              smooth:true,
              symbol:'none'
          },
          {
              name:'删除',
              data: [920,732, 951, 974, 1090, 930, 1120,1400,1200,1100,1300,890],
              type: 'line',
              smooth:true,
              symbol:'none'
          },
        ],
              color:['#0379FF', '#FEA501', '#13E1E1']
      },

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
optionbarline: {
          title: {
              text: '按变更时间统计变更次数',
              x: '10px',
              // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
              y: '0px',
              // itemGap设置主副标题纵向间隔，单位px，默认为10，
              itemGap: 20,
              backgroundColor: '#EEE',
              // 主标题文本样式设置
              textStyle: {
                fontSize: 16,
                fontWeight:'500',
                color: '#000000'
              },
          },
          legend: {
              data: ['新增', '修改', '删除'],
              x: 'right',
              // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
              y: 'top',
              textStyle: {
                color: '#666'  // 图例文字颜色
              },
          },
          tooltip: {
              trigger: 'axis',
              axisPointer: {
                  type: 'cross',
                  label: {
                      backgroundColor: '#6a7985'
                  }
              }
          },
          xAxis: {
              type: 'category',
              boundaryGap: false,
              axisLine: {
                  show: false
              },
              data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月','8月', '9月', '10月', '11月', '12月']
          },
          yAxis: {
              type: 'value',
              axisLine: {
                  show: false
              },
          },
          series: [{
              name:'新增',
              data: [820, 932, 901, 934, 1290, 1330, 1320,780,880,560,120,450],
              type: 'line',
              smooth:true,
              symbol:'none'
          },
          {
              name:'修改',
              data: [720,732, 901, 974, 1290, 1330, 1320,990,1300,1100,880,650],
              type: 'line',
              smooth:true,
              symbol:'none'
          },
          {
              name:'删除',
              data: [920,732, 951, 974, 1090, 930, 1120,1400,1200,1100,1300,890],
              type: 'line',
              smooth:true,
              symbol:'none'
          },
        ],
              color:['#0379FF', '#FEA501', '#13E1E1']
      },

适配与调用：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
mounted(){
        this.drawLine()
        this.resizeEcharts = () => {
          this.$echarts.init(document.getElementById("chartmainbar")).resize();
        }
        window.addEventListener("resize", this.resizeEcharts);
  },
methods:{
    drawLine: function(){
        //基于准本好的DOM，初始化echarts实例
        let chartmainbar = this.$echarts.init(document.getElementById("chartmainbar"));
       
        //绘制图表
        chartmainbarline.setOption(this.optionbarline);

    },
}