vue使用 v-charts 常用方法总结

v-charts传送门入口

e-charts传送门入口

折线图：

html代码如下：
<template>
	<div>
		<ve-line height="139px" width="370px" :extend="chartExtend" :data="chartData" :settings="chartSettings" :legend-visible="false" :visual-map="visualMap" :grid="grid" :data-zoom="dataZoom"> :title="{ text: '东南风 10m/s', left: 'center', textStyle: { color: '#ffffff', fontSize: 12, fontWeight: 100 } }" :toolbox="toolbox"></ve-line>
	</div>
</template>

js代码如下：
// 引入渐变模块
// import 'echarts/lib/component/visualMap'
// 设置区域缩放
// import 'echarts/lib/component/dataZoom'
// 设置Y轴每条线序不同颜色
// import echarts from 'echarts/lib/echarts';
// 设置title标题，在引用图标地方调用 :title
// import "echarts/lib/component/title";
// 下载按钮
//	import 'echarts/lib/component/toolbox';
export default{
   
	data(){
   
		// 配置项
		this.chartSettings = {
   
			
		},
		this.dataZoom = [
        {
   
          type: 'slider',
          start: 0,
          end: 10,
          backgroundColor: 'rgba(0, 0, 0, 0)', // 区域滚条背景颜色
          fillerColor: 'rgba(0, 0, 0, 0.05)' // 区域滚条蒙层颜色
        }
      ]
      // 配置图标按钮
      this.toolbox = {
   
            right: 50,
            feature: {
   
                saveAsImage: {
   }
            }
        }
		// 图表渐变（需要引入模块才能操作）
		this.visualMap = [
	        {
   
	          show: false, // 是否显示对应渐变信息
	          type: 'piecewise', // 
	          splitNumber: 5,
	          min: 0,
	          max: 60,
	          right: 0,
	          top: '50%'
	        }
	      ],
		// 图表剪切方法
		this.grid = {
   
	        right: 100
        }
        // 设置区域缩放（需要引入模块才能操作）
        this.dataZoom = [
	        {
   
	          type: 'slider',
	          start: 0,
	          end: 10
	        }
	      ]
		return {
   
			// 图表数据接收
			chartData: {
   
				columns: [], // 索引
				rows: [] // 数据
			},
			// 图表属性
			chartExtend: {
   
			// 设置显示图渐变颜色 需要引入import echarts from 'echarts/lib/echarts'
			color: [ new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
    offset: 0, color: '#087A97'}, {
   offset: 1, color: '#011D46'}]) ],
				// 设置Y轴每条线序不同颜色 需要引入import echarts from 'echarts/lib/echarts'
				'yAxis.0.splitArea': {
   
                    show: true,
                    areaStyle: {
   
                        color: [
                        	// 现在设置的是第一个为渐变，之后的都是指定颜色
                            new echarts.graphic.LinearGradient