共计 589 个字符,预计需要花费 2 分钟才能阅读完成。
1、实现效果
每次展示 5 个,轮流展示
2、实现思路
使用 datazoom, 一次展示 5 项数据,轮流展示每 2s 刷新一次。
条形图有两个柱子,一个蓝色柱子,一个灰色柱子,两个柱子重合,且蓝柱子在上面。
为了使左侧的类目和柱子同步变化,左侧类目不写成 y 轴标签,而写成柱子的标签,即在 series 里写标签
3、代码
定义一个盒子
div class="chartStyle" ref="chartImplement">/div>
配置函数
initChartArea() {
var timer = null;
var myChart = echarts.init(this.$refs.chartImplement);
myChart.clear();
var option;
var valueData = [200, 330, 300, 280, 350, 290, 180, 200, 330, 300, 280, ];
var fullData = [400, 400, 400, 400, 400, 400, 400, 400, 400, 400, 400, ];
var categoryData = ['永安镇', '大泗镇', '白马镇', '胡庄镇', 'XXX 镇', '官庄镇', '侏儒山', '永安镇', '大泗镇', '白马镇', '胡庄镇', ];
option = {
tooltip: {
show: false,
},
grid: {
top: '0%',
left: '1%',
原文地址: echarts 条形图动态显示
正文完