This is an automated email from the ASF dual-hosted git repository. ovilia pushed a commit to branch master in repository https://gitbox.apache.org/repos/asf/echarts-bar-racing.git
The following commit(s) were added to refs/heads/master by this push: new 6e0fd69 update chart according to table 6e0fd69 is described below commit 6e0fd693c586dc378a063dbec8e2dbd6dd756125 Author: Ovilia <zwl.s...@gmail.com> AuthorDate: Thu Jun 17 16:46:34 2021 +0800 update chart according to table --- src/components/BBody.vue | 21 ++++++++++++++++--- src/components/BChart.vue | 53 +++++++++++++++++++++++++++++++++++++---------- 2 files changed, 60 insertions(+), 14 deletions(-) diff --git a/src/components/BBody.vue b/src/components/BBody.vue index 498a897..5972da0 100644 --- a/src/components/BBody.vue +++ b/src/components/BBody.vue @@ -27,13 +27,25 @@ <el-input id="input-max" type="number" - value="10" + value="" size="medium" class="col-span-2" v-model="maxDataCnt" > </el-input> </div> + <div class="grid grid-cols-3 form-row"> + <label class="col-span-1">显示排名上限</label> + <el-input + id="input-animation-duration" + type="number" + value="5000" + size="medium" + class="col-span-2" + v-model="animationDuration" + > + </el-input> + </div> </el-form> </div> </el-card> @@ -52,6 +64,8 @@ <BChart :title="title" :chartData="chartData" + :maxDataCnt="maxDataCnt" + :animationDuration="animationDuration" /> </el-card> </div> @@ -68,8 +82,9 @@ export default defineComponent({ data() { return { title: '汽车销量', - maxDataCnt: 10, - chartData: null + maxDataCnt: null, + chartData: null, + animationDuration: 5000 } }, components: { diff --git a/src/components/BChart.vue b/src/components/BChart.vue index 97dc9db..fc55c9f 100644 --- a/src/components/BChart.vue +++ b/src/components/BChart.vue @@ -1,7 +1,7 @@ <template> <div> <div slot="header" class="clearfix text-base"> - 预览{{title}} + 预览 <a href="#"> <i class="el-icon-refresh"></i> </a> @@ -18,6 +18,17 @@ import {defineComponent} from 'vue'; import * as echarts from 'echarts'; +const colorAll = [ + '#5470c6', + '#91cc75', + '#fac858', + '#ee6666', + '#73c0de', + '#3ba272', + '#fc8452', + '#9a60b4', + '#ea7ccc' +]; const headerLength = 2; let chart: echarts.ECharts; @@ -25,7 +36,9 @@ export default defineComponent({ name: 'BChart', props: { title: String, - chartData: Array + chartData: Array, + maxDataCnt: Number, + animationDuration: Number }, data() { return { @@ -38,25 +51,31 @@ export default defineComponent({ } }, mounted() { - chart = echarts.init(this.$refs.chart as HTMLElement); }, methods: { run() { - if (!chart) { - return; + this.clearTimeoutHandlers(); + if (chart) { + chart.dispose(); } + + chart = echarts.init(this.$refs.chart as HTMLElement); + const animationDuration = this.animationDuration || 5000; + const option = { dataset: { source: this.chartData }, xAxis: { - type: 'value' + type: 'value', + max: 'dataMax' }, yAxis: { type: 'category', inverse: true, animationDuration: 300, - animationDurationUpdate: 300 + animationDurationUpdate: 300, + max: this.maxDataCnt ? this.maxDataCnt - 1 : null }, series: [{ id: 'bar', @@ -68,13 +87,25 @@ export default defineComponent({ realtimeSort: true, label: { show: true, - position: 'right' + position: 'right', + valueAnimation: true + }, + itemStyle: { + color: param => { + return param.data[1] || colorAll[param.dataIndex % colorAll.length]; + } } }], grid: { right: 60 }, - animationDurationUpdate: 5000, + title: { + text: this.title, + left: 10, + top: 10 + }, + animationDuration: 0, + animationDurationUpdate: animationDuration, animationEasing: 'linear', animationEasingUpdate: 'linear' }; @@ -100,7 +131,7 @@ export default defineComponent({ }); that.removeTimeoutHandlers(timeout); }; - timeout = window.setTimeout(timeoutCb, i * 5000); + timeout = window.setTimeout(timeoutCb, i * animationDuration); that.timeoutHandlers.push(timeout); })(i); } @@ -109,8 +140,8 @@ export default defineComponent({ clearTimeoutHandlers() { for (let i = 0; i < this.timeoutHandlers.length; ++i) { clearTimeout(this.timeoutHandlers[i]); - this.timeoutHandlers.splice(i, 1); } + this.timeoutHandlers = []; }, removeTimeoutHandlers(handler: number) { --------------------------------------------------------------------- To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org For additional commands, e-mail: commits-h...@echarts.apache.org