普通折线图加断点补零配置
HTML
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/echarts/dist/echarts.min.js"></script>
<script src="//unpkg.com/v-charts/lib/index.min.js"></script>
<div id="app">
<ve-line :data="chartData" :settings="chartSettings" tooltip-visible legend-visible></ve-line>
</div>
JavaScript
new Vue({
el: '#app',
created: function() {
this.chartData = {
columns: ['日期', '销售额-1季度', '销售额-2季度', '占比', '其他'],
rows: [{
'日期': '1月1日',
'销售额-1季度': 1523,
'销售额-2季度': 1523
}, {
'日期': '1月2日',
'销售额-1季度': 1223,
'销售额-2季度': 1523
}, {
'日期': '1月3日',
'销售额-1季度': 2123,
'销售额-2季度': 1523
}, {
'日期': '1月4日',
'销售额-1季度': 4123,
'销售额-2季度': 1523
}, {
'日期': '1月5日',
'销售额-1季度': 3123
}, {
'日期': '1月6日',
'销售额-1季度': 7123
}]
}
this.chartSettings = {
dimension: ['日期'],
metrics: ['销售额-1季度', '销售额-2季度'],
yAxisName: ['销售额'],
nullAddZero: true
}
}
})