JavaScript
new Vue({
el: '#app',
created: function () {
this.chartData = {
columns: ['日期', '销售额-1季度', '销售额-2季度', '占比', '其他'],
rows: [
{ '日期': '1月1日', '销售额-1季度': 1523, '销售额-2季度': 1523, '占比': 0.12, '其他': 100 },
{ '日期': '1月2日', '销售额-1季度': 1223, '销售额-2季度': 1523, '占比': 0.345, '其他': 100 },
{ '日期': '1月3日', '销售额-1季度': 2123, '销售额-2季度': 1523, '占比': 0.7, '其他': 100 },
{ '日期': '1月4日', '销售额-1季度': 4123, '销售额-2季度': 1523, '占比': 0.31, '其他': 100 },
{ '日期': '1月5日', '销售额-1季度': 3123, '销售额-2季度': 1523, '占比': 0.12, '其他': 100 },
{ '日期': '1月6日', '销售额-1季度': 7123, '销售额-2季度': 1523, '占比': 0.65, '其他': 100 }
]
}
this.chartGrid = {
right: '30%'
}
this.chartSettings = {
dimension: ['日期'],
metrics: ['销售额-1季度', '销售额-2季度'],
label: {
show: true,
position: 'right',
color: '#333',
formatter: '{a}-{c}K'
},
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0,0,1,0,[{
offset: 0, color: '#2FDE80'
},{
offset: 1, color: 'green'
}])
}
}
}
this.chartExtend = {
xAxis: {
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
}
}
}
/* this.chartColor = [new echarts.graphic.LinearGradient(
1, 0, 0, 1, [{
offset: 0,
color: 'rgb(25,212,174)'
}, {
offset: 1,
color: 'rgba(25,212,174,0.3)'
}]),
new echarts.graphic.LinearGradient(
1, 0, 0, 1, [{
offset: 0,
color: 'rgb(90,177,239)'
}, {
offset: 1,
color: 'rgba(90,177,239,0.3)'
...