v-charts基本参数的使用

今天以折线图为例，说一下v-charts基本参数的一些使用

一、vue为例，上面是使用方法，下面是数据。看起来好像很简单，假如我想要折线图中的图例消失，怎么办？

<ve-line :height="chartHeight"
         :width="chartWidth"
         :resizeable="true"
         :data="loanChangeData"
         :settings=" loanChangeSettings"
         :colors=" loanChangeSettings.colors"
         :extend="lineChartExtend"
         ref="chart_line"
         legend-position="top">
    </ve-line>


data() {
    return {
      chartWidth: '1200px',
      chartHeight: '280px',
      
      loanChangeSettings: {
        colors: ['#7380ff', '#ff918e', '#fed200', '#ff918e', '#e71c10'],
      },

      loanChangeData: {
        columns: [],
        rows: [],
        series: [
          {
            type: 'line',
            label: {show: true, position: 'top'}
          }
        ]
      },
    }
}

        以下为v-charts的基本配置项，官网截图

二、当然，上述的基础配置项可能无法满足某些业务场景，那么此时就有一个非常重要的配置项：额外属性 :extend="lineChartExtend"，如，我这边的应用场景有：体现标题，图例靠右，第二条折线为虚线等等。

lineChartExtend: {
        title:{
          text: '业务放款情况',
          padding: [4, 2, 0, 14],
          textStyle: {
            textAlign: 'center',
            color: '#563b80'
          }
        },
        legend: {
          x: 'right',
          padding: [0,20],
        },
        'series.1.lineStyle':{type: 'dashed'} ,
      },

三、以上有很多额外配置项，我们去哪里找呢？echarts官网文档。对应的图标，对应的配置，对应的配置项含义，基本都涵盖了所有场景。

        Documentation - Apache ECharts

四、另外，还有图表的一些事件，如点击事件、移入事件、移出事件等，我们该如何添加呢？直接上代码，以点击事件为例，代码写入mounted()中

mounted() {

this.$nextTick(() => {
    chart.on('click', function (params) {
        //获取配置项
        var options = this.getOption();
        //获取数据
        var data = options.series[params.seriesIndex].data;
        //做你需要做的
    }
  }
}

肯定还有很多场景，如果后续用到，我会继续补充。希望能帮助到大家！