小聂子客栈

使用v-charts所遇问题及解决方法（持续更新06.14）

2018-05-08 热度 ℃

最近在做一个数据统计的需求要用到图表，偶然发现饿了么团队也有集成百度Echarts，索性直接使用。
期间遇到些问题，Mark一下

1. 颜色渐变

在项目中引用echarts：

1
import echarts from 'echarts/lib/echarts'

直接修改颜色参数：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<ve-line :data="chartData" :colors="chartColor"></ve-line>
<script>
export default{
	data(){
		return {
			chartColor: [new echarts.graphic.LinearGradient(
					0,0,0,1,[{
					offset: 0, color: 'rgb(25,212,174)'
				},{
					offset: 1, color: 'rgba(25,212,174,0.3)'
				}]),
				new echarts.graphic.LinearGradient(
					0,0,0,1,[{
					offset: 0, color: 'rgb(90,177,239)'
				},{
					offset: 1, color: 'rgba(90,177,239,0.3)'
				}]),
				new echarts.graphic.LinearGradient(
					0,0,0,1,[{
					offset: 0, color: 'rgb(250,110,134)'
				},{
					offset: 1, color: 'rgba(250,110,134,0.3)'
				}]
			)],
		}
	}
}
</script>

或者修改itemStyle，这个不知怎么设置两个色值以上→_ →

1
2
3
4
5
6
7
8
9
10
11
this.chartSetting = {
	itemStyle: {
		normal: {
			color: new echarts.graphic.LinearGradient(0,0,1,0,[{
				offset: 0, color: '#2FDE80'
			},{
				offset: 1, color: 'red'
			}])
		}
	}
}

详细：
折线图
柱状图

2. 双轴对齐

双轴对齐关键是限定y轴最大最小值和间隔值（interval）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
this.chartData = {
	rows: [...]
}

//以下两者是倍数双轴的值才不会出现小数点
this.yAxisMultiple = 10;//双轴对齐数据处理倍数
this.yAxisSplitNumber = 5;//双轴分段数


//分别获取左右两轴的列表
let left_list = this.chartData.rows.map(c => c.left),
	right_list = this.chartData.rows.map(c => c.right);


//获取列表内的最大值并向上取整
let left_max = Math.ceil(Math.max(...let_list)/this.yAxisMultiple)*this.yAxisMultiple,
	right_max = Math.ceil(Math.max(...right_list)/this.yAxisMultiple)*this.yAxisMultiple;


//引用yAxis提供的默认参数设置最大最小值和间隔值
let that = this;
this.chartExtend = {
	yAxis(item){
		item.map(c => { c.min = 0 })
		item[0].max = left_max
		item[0].interval = left_max/that.yAxisSplitNumber
		item[1].max = right_max
		item[1].interval = right_max/that.yAxisSplitNumber
	}
}

详情： jsfiddle地址

3.折线图Y轴数值倍数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
this.chartExtend = {
	yAxis(item){
		let obj = {
			splitNumber: 5,
			min: 0,
			max: (val) => {
				if(val.max < 5){
					return 5
				}else{
					return Math.ceil(val.max/10)*10
				}
			}
		};
		obj.max(item[0])
		Object.assign(item[0], obj)
		return item;
	}
}

4.地图

Tags: vue javascript v-charts echarts
← 常用css（持续更新07.19） vue相关（持续更新01.31） →

扫描二维码，分享此文章