vue echarts 配置项复用优化

**

echarts 配置项复用

**

export default {

data() {
return {
optionConfig: {
grid: {
top: ‘30px’,
left: ‘30px’,
right: ‘15px’,
bottom: ‘18px’,
},
tooltip: {
//设置tip提示
trigger: ‘axis’,
},

    color: ['#34C758', '#FF9502'], //设置区分（每条线是什么颜色，和 legend 一一对应）
    xAxis: {
      //设置x轴
      type: 'category',
      boundaryGap: false, //坐标轴两边不留白
      data: ['14:00-14:59', '15:0-15:59', '16:0-16:59', '17:0-17:59', '18:0-18:59', '19:0-19:59', '20:0-20:59', '21:0-21:59', '22:0-22:59', '23:0-23:59'],

      nameTextStyle: {
        //坐标轴名称的文字样式
        color: '#FA6F53',
        fontSize: 16,
        padding: [0, 0, 0, 20],
      },
      axisLine: {
        //坐标轴轴线相关设置。
        lineStyle: {
          color: '#C7C7CC',
        },
      },
      axisTick: {
        show: false,
      },
    },
    yAxis: {
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
        },
      },

      type: 'value',
      max: 50,
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
    },
  },

}}}

methods: {
SignPeopleNum(arrSignPeopleNum) {
var vchartid = this.refType;

  this.chartLine = echarts.init(this.$refs.refType1);

  const series = {
    series: [
      {
        name: '参与签到人数',
        data: arrSignPeopleNum,
        type: 'line',
        connectNulls: true,
        lineStyle: {
          normal: {
            color: '#FF9502',
          },
        },
      },
    ],
  };
  var option = Object.assign(this.optionConfig, series);
  // 使用刚指定的配置项和数据显示图表。
  this.chartLine.setOption(option);
},

}