如何使用 v-chart 实现自定义效果

前言： 我们都知道v-chart 是用e-chart来包装的。使用v-chart，有方便的一面，简化了处理数据的过程。但是，有时候，我们还是需要e-chart那要的配置来实现图标的样式风格自定义的。该如何实现？

v-chart 的官方文档最近这段时间有问题，放一个能用的链接：http://woolen.gitee.io/v-charts/#/line

答案是： 用v-chart 的 extend 属性来弄。内部就看e-cahrt的文档。

示例：

<template>
        <ve-histogram
          height="240px"
          :data="chartData"
          :colors="chartColors"
          :settings="chartSettings"
          :extend="chartExtend"
        ></ve-histogram>
</template>
export default {
	data() {
		this.chartExtend = {
	    legend: {
	        bottom: 10
	        // itemHeight: 4,
	        // itemWidth: 8,
	        // borderCap: 'round'
	      },
	      grid: {
	        show: true,
	        top: 35,
	        bottom: 40,
	        // left: 10,
	        // right: 10,
	        borderColor: '#fff'
	        // backgroundColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
	        //   { offset: 0, color: '#F6FAFD' },
	        //   { offset: 1, color: '#ffffff' }
	        // ])
	      },
	      xAxis: {
	        axisLine: {
	          show: true,
	          lineStyle: {
	            color: '#e8e8e8'
	          }
	        },
	        axisLabel: {
	          rotate: 35,
	          textStyle: {
	            color: '#D1D5DB',
	            fontSize: 10
	          }
	        }
	      },
	      yAxis: {
	        nameTextStyle: {
	          color: '#D1D5DB'
	        },
	        axisLabel: {
	          textStyle: {
	            color: '#D1D5DB',
	            fontSize: 12
	          }
	        },
	        axisTick: {
	          show: true
	        },
	        splitNumber: 3,
	        axisLine: {
	          show: true,
	          lineStyle: { color: '#B6B9C0' }
	        },
	        // x轴对应的竖线
	        splitLine: {
	          show: false,
	          lineStyle: {
	            color: ['#E2E4E8'],
	            // width: 1,
	            type: 'dash'
	          }
	        }
	      },
	      tooltip: {
	        trigger: 'axis',
	        confine: true
	      },
	      // 每个柱子
	      series(v) {
	        v.forEach(i => {
	          // console.log('series', i)
	          if (i.type == 'bar') {
	            i.barWidth = 14
	            i.smooth = true
	            i.itemStyle = {
	              barBorderRadius: [2, 2, 0, 0],
	              // color: '#006EFF',
	              borderWidth: 0
	            }
	          }
	        })
	        return v
	      }
	    }
		return {
			chartData:[]
		}
	}
}

通过extend属性，我们在这个对象内部，就可以针对e-cahrt的一些属性api进行自定义了，内部的参数，查阅e-cahrt官方文档，他们是一致的。

对于其他的饼图、折线图等，都是一样的用法。

2、如何自定义图标的渐变背景颜色？

    this.chartExtend = {
      legend: {
        bottom: 10
      },
      grid: {
        show: true,
        top: 35,
        bottom: 40,
         backgroundColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: '#F6FAFD' },
        { offset: 1, color: '#ffffff' }
        ])
      },

使用new echarts.graphic.LinearGradient来实现渐变
3、如何自定义tooltips？

 this.pieChartExtend = {
      color: [
        '#7EC4EC',
        '#FA945C',
        '#B96EFF',
        '#F9E092',
        '#4DDEBC',
        '#00A6FF',
        '#BFEF43',
        '#5C58F0',
        '#a9E092',
        'red',
        'blue',
        'purple',
        'gold'
      ],
      grid: {
        containLabel: true
      },
      tooltip: {
        trigger: 'item',
        formatter: function (params) {
          let index = params.dataIndex
          let data = self.pieChartData.rows[index]
          let res = `<p><span style='background-color:${
            params.color
          };width:10px;height:10px;border-radius:50%;display:inline-block;'></span> ${data.name || '--'}:</p>
          <p>人数：${data.value}个 </p>
          <p>占比： ${params.percent}%</p>
          `
          return res
        },
        textStyle: {
          fontSize: 14
        },
        confine: true
      },
      legend: {
        show: true,
        bottom: '10'
        // align: 'left',
        // orient: 'vertical', //垂直显示
        // y: 'center', //延Y轴居中
        // right: 10,
        // itemHeight: 4,
        // itemWidth: 8,
        // formatter: name => {
        //   let data = this.pieChartData.rows
        //   let tarValue = 0
        //   for (let i = 0; i < data.length; i++) {
        //     if (data[i].name == name) {
        //       tarValue = data[i].value
        //     }
        //   }
        //   return name + ' ' + tarValue + '个'
        // }
      },
      // series: {
      //   center: ['50%', '40%'],
      //   radius: ['30%', '48%']

      // }
      series(v) {
        v.forEach((item, index) => {
          let oriData = item.data[0]
          index = index + 1
          item.center = ['50%', '40%']
          item.radius = ['30%', '48%']
          item.hoverAnimation = false
          item.label = {
            formatter: function (data) {
              let name = data.name
              if (name.substr(6) && name.length > 6) {
                return name.substr(0, 6) + '...\n' + data.value
              } else {
                return name + '(' + data.value+')'
              }
            }
          }
        })
        return v
      }
    }