You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by ov...@apache.org on 2021/08/16 10:25:52 UTC
[echarts-bar-racing] branch master updated: feat: download
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 ec32988 feat: download
ec32988 is described below
commit ec3298896baa73e6eb702f7d0fcb86b503090f47
Author: Ovilia <zw...@gmail.com>
AuthorDate: Mon Aug 16 18:25:42 2021 +0800
feat: download
---
package-lock.json | 13 +---
package.json | 1 +
src/components/BBody.vue | 8 +--
src/components/BChart.vue | 10 ++-
src/components/BTable.vue | 73 +++++++++++++--------
src/helper/test.html | 158 ++++++++++++++++++++++++++++++++++++++++++++++
src/i18n/en-US.ts | 16 ++++-
src/i18n/zh-CN.ts | 14 +++-
8 files changed, 248 insertions(+), 45 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index c489f7f..c79ab35 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1185,7 +1185,6 @@
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/color/-/color-3.1.3.tgz",
"integrity": "sha512-xgXAcTHa2HeFCGLE9Xs/R82hujGtu9Jd9x4NW3T34+OMs7VoPsjwzRczKHvTAHeJwWFwX5j15+MgAppE8ztObQ==",
- "dev": true,
"requires": {
"color-convert": "^1.9.1",
"color-string": "^1.5.4"
@@ -1195,7 +1194,6 @@
"version": "1.9.3",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
"integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
- "dev": true,
"requires": {
"color-name": "1.1.3"
}
@@ -1203,8 +1201,7 @@
"color-name": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
- "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
- "dev": true
+ "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
}
}
},
@@ -1220,14 +1217,12 @@
"color-name": {
"version": "1.1.4",
"resolved": "http://registry.npm.taobao.org/color-name/download/color-name-1.1.4.tgz",
- "integrity": "sha1-wqCah6y95pVD3m9j+jmVyCbFNqI=",
- "dev": true
+ "integrity": "sha1-wqCah6y95pVD3m9j+jmVyCbFNqI="
},
"color-string": {
"version": "1.5.5",
"resolved": "https://registry.npmjs.org/color-string/-/color-string-1.5.5.tgz",
"integrity": "sha512-jgIoum0OfQfq9Whcfc2z/VhCNcmQjWbey6qBX0vqt7YICflUmBCh9E9CiQD5GSJ+Uehixm3NUwHVhqUAWRivZg==",
- "dev": true,
"requires": {
"color-name": "^1.0.0",
"simple-swizzle": "^0.2.2"
@@ -3753,7 +3748,6 @@
"version": "0.2.2",
"resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
"integrity": "sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=",
- "dev": true,
"requires": {
"is-arrayish": "^0.3.1"
},
@@ -3761,8 +3755,7 @@
"is-arrayish": {
"version": "0.3.2",
"resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
- "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==",
- "dev": true
+ "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="
}
}
},
diff --git a/package.json b/package.json
index bb3f5b7..a1c27cf 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
"yargs": "^6.6.0"
},
"dependencies": {
+ "color": "^3.1.3",
"echarts": "^5.1.1",
"element-plus": "^1.0.2-beta.44",
"handsontable": "^6.2.2",
diff --git a/src/components/BBody.vue b/src/components/BBody.vue
index 0246a5b..e176d78 100644
--- a/src/components/BBody.vue
+++ b/src/components/BBody.vue
@@ -3,15 +3,14 @@
<div class="grid grid-cols-12 h-full text-sm">
<el-card class="box-card col-span-3">
<h1 slot="header" class="clearfix text-xl">
- 动态排序柱状图生成器
+ {{$t('toolName')}}
</h1>
<div id="el-config" class="align-middle">
<el-form ref="form">
<div class="grid grid-cols-3 form-row">
- <label class="col-span-1">标题</label>
+ <label class="col-span-1">{{$t('chartTitle')}}</label>
<el-input
id="input-title"
- value="汽车产量动态排名"
size="medium"
class="col-span-2"
v-model="title"
@@ -86,7 +85,8 @@ export default defineComponent({
name: 'BBody',
data() {
return {
- title: '汽车销量',
+ // @ts-ignore:
+ title: this.$i18n.t('defaultChartTitle'),
maxDataCnt: null,
chartData: null,
animationDuration: 3000
diff --git a/src/components/BChart.vue b/src/components/BChart.vue
index 51f4f01..570666e 100644
--- a/src/components/BChart.vue
+++ b/src/components/BChart.vue
@@ -1,7 +1,7 @@
<template>
<div>
<div slot="header" class="clearfix text-base">
- 预览
+ {{$t('preview')}}
<a href="javascript:;" @click="run()">
<i class="el-icon-refresh"></i>
</a>
@@ -57,11 +57,15 @@ export default defineComponent({
this.clearTimeoutHandlers();
if (chart) {
chart.dispose();
+ chart = null;
}
- chart = echarts.init(this.$refs.chart as HTMLElement);
- const animationDuration =/* this.animationDuration ||*/ 5000;
+ if (!this.chartData.length) {
+ return;
+ }
+ chart = echarts.init(this.$refs.chart as HTMLElement);
+ const animationDuration = this.animationDuration;
const option = {
xAxis: {
type: 'value',
diff --git a/src/components/BTable.vue b/src/components/BTable.vue
index d972959..72ec297 100644
--- a/src/components/BTable.vue
+++ b/src/components/BTable.vue
@@ -1,7 +1,10 @@
<template>
<div>
<div slot='header' class='clearfix text-base'>
- 数据
+ {{$t('data')}}
+ <a href="javascript:;" @click="run()">
+ <i class="el-icon-refresh"></i>
+ </a>
</div>
<div ref='table' id='table-panel' class='overflow-auto absolute bottom-4 top-14 left-5 right-5 border'>
</div>
@@ -12,10 +15,26 @@
import Handsontable from 'handsontable';
import {defineComponent} from 'vue';
import * as _ from 'lodash';
+import * as Color from 'color';
const headerLength = 2;
export type ChartData = string[][];
+function colorRenderer(instance, td, row, col, prop, value) {
+ Handsontable.renderers.TextRenderer.apply(this, arguments);
+ if (col === 0 || value === '' || !value) {
+ return td;
+ }
+ try {
+ Color(value);
+ td.innerHTML = `<div style="width: 14px; height: 14px; display: inline-block; margin-right: 5px; margin-top: 5px; border-radius: 50%; background-color:${value}"></div><div style="display: inline-block; position: relative; top: -2px;">${value}</div>`;
+ }
+ catch (e) {
+ console.error(e);
+ }
+ return td;
+}
+
export default defineComponent({
name: 'BTable',
props: {
@@ -23,8 +42,11 @@ export default defineComponent({
data() {
return {
tableData: [
- ['Name', 'Ford', 'Tesla', 'Toyota', 'Honda'],
- ['Color', '', '', '', ''],
+ ['', 'blueberry', 'banana', 'kiwi', 'watermelon']
+ // @ts-ignore:
+ .map(name => name ? this.$i18n.t(name) : ''),
+ // @ts-ignore:
+ [this.$i18n.t('color'), '', '', '', ''],
['2017', '13', '11', '12', '14'],
['2018', '20', '44', '34', '39'],
['2019', '62', '75', '58', '63']
@@ -41,25 +63,26 @@ export default defineComponent({
colHeaders: true,
filters: true,
dropdownMenu: true,
- // cell: [{
- // row: 0,
- // col: 0,
- // readOnly: true
- // }, {
- // row: 1,
- // col: 0,
- // readOnly: true
- // }],
- //- cells: function (row, col) {
- //- if (row === 1) {
- //- return {
- //- renderer: colorRenderer
- //- }
- //- }
- //- else {
- //- return {};
- //- }
- //- }
+ cell: [{
+ row: 0,
+ col: 0,
+ readOnly: true
+ }, {
+ row: 1,
+ col: 0,
+ readOnly: true,
+ data: 'Color'
+ }],
+ cells: function (row, col) {
+ if (row === 1) {
+ return {
+ renderer: colorRenderer
+ };
+ }
+ else {
+ return {};
+ }
+ }
});
this.table.updateSettings({
afterChange: () => {
@@ -81,15 +104,15 @@ export default defineComponent({
getChartData(): ChartData {
let columns = 0;
const firstRow = this.tableData[0];
- for (let i = 0; i < firstRow.length; ++i) {
+ for (let i = 1; i < firstRow.length; ++i) {
if (!firstRow[i] || !firstRow[i].trim()) {
columns = i;
break;
}
}
- let rows = 0;
- for (let i = 0; i < this.tableData.length; ++i) {
+ let rows = headerLength;
+ for (let i = headerLength; i < this.tableData.length; ++i) {
if (!this.tableData[i] || !this.tableData[i][0] || !this.tableData[i][0]) {
rows = i;
break;
diff --git a/src/helper/test.html b/src/helper/test.html
new file mode 100644
index 0000000..44bfe12
--- /dev/null
+++ b/src/helper/test.html
@@ -0,0 +1,158 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Apache ECharts Bar Racing</title>
+
+ <style>
+ #chart {
+ width: 100%;
+ height: 500px;
+ border: 1px solid #ddd;
+ }
+ </style>
+
+ <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.2/dist/echarts.js"></script>
+</head>
+<body>
+ <div id="chart"></div>
+
+ <script>
+ var colorAll = [
+ '#5470c6',
+ '#91cc75',
+ '#fac858',
+ '#ee6666',
+ '#73c0de',
+ '#3ba272',
+ '#fc8452',
+ '#9a60b4',
+ '#ea7ccc'
+ ];
+ var headerLength = 2;
+
+ var animationDuration = 5000;
+ var maxDataCnt = null;
+ var title = '';
+ var data = [
+ ['Name', 'Ford', 'Tesla', 'Toyota', 'Honda'],
+ ['Color', '', '', '', ''],
+ ['2017', '13', '11', '12', '14'],
+ ['2018', '20', '14', '14', '19'],
+ ['2019', '22', '15', '18', '23']
+ ];
+
+ var chart;
+ var timeoutHandlers = [];
+
+ run();
+
+ function run() {
+ clearTimeoutHandlers();
+ if (chart) {
+ chart.dispose();
+ }
+
+ chart = echarts.init(document.getElementById('chart'));
+ var option = {
+ xAxis: {
+ type: 'value',
+ max: 'dataMax'
+ },
+ yAxis: {
+ type: 'category',
+ data: data[0].slice(1),
+ inverse: true,
+ animationDuration: 300,
+ animationDurationUpdate: 300,
+ max: maxDataCnt ? maxDataCnt - 1 : null
+ },
+ series: [{
+ id: 'bar',
+ type: 'bar',
+ data: getDataLine(0),
+ seriesLayoutBy: 'row',
+ realtimeSort: true,
+ label: {
+ show: true,
+ position: 'right'
+ },
+ itemStyle: {
+ color: function (param) {
+ return param.data[1] || colorAll[param.dataIndex % colorAll.length];
+ }
+ }
+ }],
+ grid: {
+ right: 60,
+ bottom: 30
+ },
+ title: [{
+ text: 'aaa',
+ right: 20,
+ bottom: 15,
+ textStyle: {
+ color: '#ccc',
+ opacity: 0.3,
+ fontSize: 70
+ }
+ }, {
+ text: title,
+ left: 10,
+ top: 10
+ }],
+ animationDuration: 0,
+ animationDurationUpdate: animationDuration,
+ animationEasing: 'linear',
+ animationEasingUpdate: 'linear'
+ };
+ chart.setOption(option, true);
+
+ var dataCnt = data.length - headerLength - 1;
+ for (var i = 0; i < dataCnt; ++i) {
+ (function (i) {
+ var timeout;
+ var timeoutCb = function () {
+ chart.setOption({
+ series: [{
+ type: 'bar',
+ id: 'bar',
+ data: getDataLine(i + 1),
+ label: {
+ valueAnimation: true
+ }
+ }]
+ });
+ removeTimeoutHandlers(timeout);
+ };
+ timeout = window.setTimeout(timeoutCb, i * animationDuration);
+ timeoutHandlers.push(timeout);
+ })(i);
+ }
+ }
+
+ function getDataLine(n) {
+ return data[headerLength + n].slice(1).map(function (n) {
+ return parseInt(n, 10);
+ });
+ }
+
+ function clearTimeoutHandlers() {
+ for (let i = 0; i < timeoutHandlers.length; ++i) {
+ clearTimeout(timeoutHandlers[i]);
+ }
+ timeoutHandlers = [];
+ }
+
+ function removeTimeoutHandlers(handler) {
+ for (let i = 0; i < timeoutHandlers.length; ++i) {
+ if (timeoutHandlers[i] === handler) {
+ timeoutHandlers.splice(i, 1);
+ }
+ }
+ }
+ </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/src/i18n/en-US.ts b/src/i18n/en-US.ts
index 10596f9..2e7deaf 100644
--- a/src/i18n/en-US.ts
+++ b/src/i18n/en-US.ts
@@ -1,3 +1,15 @@
export default {
- helloWorld: 'Hello Apache ECharts'
-}
\ No newline at end of file
+ toolName: 'Bar Racing Generator',
+ chartTitle: 'Chart title',
+ defaultChartTitle: 'Fruit sales',
+ maxDataCount: 'Max data count',
+ animationDuration: 'Animation duration (ms)',
+ download: 'Download',
+ data: 'Data',
+ color: 'Color',
+ blueberry: 'Blueberry',
+ banana: 'Banana',
+ kiwi: 'Kiwi',
+ watermelon: 'Watermelon',
+ preview: 'Preview'
+};
diff --git a/src/i18n/zh-CN.ts b/src/i18n/zh-CN.ts
index f4a9a60..8837bda 100644
--- a/src/i18n/zh-CN.ts
+++ b/src/i18n/zh-CN.ts
@@ -3,7 +3,19 @@ import langEn from './en-US';
type DEFAULT_LANG_TYPE = typeof langEn;
const langCn: DEFAULT_LANG_TYPE = {
- helloWorld: '你好 Apache ECharts'
+ toolName: '动态排序柱状图生成器',
+ chartTitle: '图表标题',
+ defaultChartTitle: '水果销量',
+ maxDataCount: '排名上限',
+ animationDuration: '动画时长（毫秒）',
+ download: '下载',
+ data: '数据',
+ color: '颜色',
+ blueberry: '蓝莓',
+ banana: '香蕉',
+ kiwi: '猕猴桃',
+ watermelon: '西瓜',
+ preview: '预览'
};
export default langCn;
\ No newline at end of file
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org