vue 项目 中echarts 折线图使用基础要点

带渐变区域颜色的折线图

vue 项目 中echarts 折线图使用基础要点

import echarts from 'echarts';//项目引入
 setChart() {
      const myChart = echarts.init(this.$refs.box);
      const option = {
        title: {
        //   text: '某楼盘销售情况',
        //   subtext: '纯属虚构'
        },
        tooltip: {//标点显示内容
          trigger: 'axis'
        },
        legend: {
          data: ['发票', '智能柜', '极汇购'],
		 // x: 'center', // 居右显示,控制标尺显示位置
		  right: '100',
		  icon: 'circle', // 圆形,默认长条
          textStyle: { color: '#fff' }//标记文本颜色
        },
        color: ['rgb(95,107,176)', 'rgb(167,28,159)', 'rgb(196,124,70)'],//控制标尺每个标记的颜色
        // backgroundColor: 'rgba(0,0,0,0)',
        toolbox: {//工具栏
          show: false,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        calculable: true,
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['0', '5', '10', '15', '20', '25', '30'],
            splitLine: { show: false }, // 去除网格线
            splitArea: { show: false }, // 保留网格区域
            axisLine: {
              lineStyle: {
                type: 'solid',
                color: '#137abf', // 左边线的颜色
                // width: '2'// 坐标线的宽度
              }
            },
            axisLabel: {
              textStyle: {
                color: '#fff', // 坐标值得具体的颜色

              }
            }
            // splitArea: {// 折线图背景
            //   show: true,
            //   areaStyle: {
            //     color: ['rgba(216,216,216,0.08)', 'rgba(216,216,216,0.04)']
            //   }
            // }
          }
        ],
        yAxis: [
          {
            type: 'value',
            splitLine: { show: true, lineStyle: { color: '#137abf' } }, // 去除网格线
            splitArea: { show: false }, // 保留网格区域
            axisLine: {
              lineStyle: {
                type: 'solid',
                color: '#137abf',
              }
            },
            axisLabel: {
              textStyle: {
                color: '#fff', // 坐标值得具体的颜色

              }
            }
          }
        ],
        series: [
          {
            name: '发票',
            type: 'line',
            // smooth: true,
           	lineStyle: { color: 'rgb(95,107,176)' },//折线颜色
            itemStyle: {
              normal: {
                areaStyle: {//折现区域颜色
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#297dc5'
                  }, {
                    offset: 1,
                    color: 'transparent'
                  }])
                }
			 }
            },
            data: [1500, 1700, 2300, 100, 0, 0, 0],
          },
          {
            name: '智能柜',
            type: 'line',
            // smooth: true,
            lineStyle: { color: 'rgb(167,28,159)' },
            itemStyle: {
              normal: {
                areaStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgb(179,71,121)'
                  }, {
                    offset: 1,
                    color: 'rgba(255, 70, 131,0)'
                  }])
                }
			 }
            },
            data: [1800, 1900, 2100, 2100, 2500, 3500, 3100]
          },
          {
            name: '极汇购',
            type: 'line',
            // smooth: true,
            lineStyle: { color: 'rgb(196,124,70)' },
            itemStyle: {
              normal: {
                areaStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgb(126,69,78)'
                  }, {
                    offset: 1,
                    color: 'rgba(255, 70, 131,0)'
                  }])
                }
			 }
            },
            data: [2100, 1600, 1900, 1900, 2500, 3900, 3200]
          }
        ]
      };
	  myChart.setOption(option);
	  },