Echarts公共方法

Vue引入Echarts

install

1.安装Echartsnpm install echarts --save
2.项目全局引入形式--#main.js 全局引入形式import * as echarts from "echarts"Vue.prototype.$echarts =echarts		

公共方法JS

/*** @author: wangjie* @description: 通用echarts图表封装* @date: 2020/7/23 15:23* @update: 
*/import * as echarts from "echarts"
export default class EChartsWrapper {constructor(element, options = {}) {if (element == null || element == undefined) {return;}this.chart = echarts.init(element);this.options = Object.assign({}, options);this.initChart();}initChart() {this.chart.setOption(this.options);}// 更新图表配置updateOptions(newOptions) {this.options = Object.assign(this.options, newOptions);this.chart.setOption(this.options);}// 刷新数据refreshData(seriesIndex, newData) {const series = this.options.series[seriesIndex];if (series) {series.data = newData;this.updateOptions({});}}// 图表重载，适用于窗口大小变化等情况resize() {this.chart.resize();}// 销毁图表实例dispose() {this.chart.dispose();this.chart = null;}// 扩展方法，例如添加事件监听器on(eventName, callback) {this.chart.on(eventName, callback);}// 其他自定义方法，例如根据图表类型进行特定配置customizeForType(type) {switch (type) {case 'line':this.options.xAxis.type = 'category';this.options.yAxis.type = 'value';break;case 'bar':if (this.options == undefined) return;this.options.xAxis.type = 'category';this.options.yAxis.type = 'value';break;case 'pie':this.options.series.type = 'pie';break;default:break;}this.updateOptions({});}// 新增自动滚动方法startAutoScroll(scrollInterval = 2000) {let timer = null;timer = setInterval(() => {// 检查series是否为空或不存在if (!this.options.series || !Array.isArray(this.options.series)) {console.error('Series data is not properly configured.');return;}this.options.series.forEach((series, index) => {const xAxisData = this.options.xAxis.data; // 获取X轴数据if (Array.isArray(series.data) && series.data.length > 1 && Array.isArray(xAxisData)) {// 将第一个数据移到数组末尾const firstItem = series.data.shift();const firstXLabel = xAxisData.shift(); // 同步移动X轴的第一个标签series.data.push(firstItem);xAxisData.push(firstXLabel); // 将移除的X轴标签添加到末尾// 更新图表this.refreshData(index, series.data);this.updateOptions({ xAxis: { data: xAxisData } }); // 更新X轴数据                    }});}, scrollInterval);// 存储定时器引用，以便后续清除this.autoScrollTimer = timer;}// 新增停止自动滚动的方法stopAutoScroll() {if (this.autoScrollTimer) {clearInterval(this.autoScrollTimer);this.autoScrollTimer = null;}}
}

测试index.vue

<template><div class="chart-container"><div v-for="(item, index) in chartTypes" :key="index" class="chart-header"><h2>{{ item }}</h2><div ref="chartRefs" :id="`chart-${index}`" :style="{ width: '100%', height: '550px' }"></div></div><!-- <button type="primary" @click="updateChartData">更新数据</button>         --></div>
</template><script>
import EChartsWrapper from '@/api/echarts/EChartsWrapper'
import * as echarts from 'echarts';
export default {name: 'ChartComponent',data() {return {chartInstance: null,chartTypes: ['bar', 'line', 'pie', 'radar', 'tree', 'calendar', 'gauge', 'funnel'],chartInstances: [],};},mounted() {this.chartTypes.forEach((item, index) => {// this.queryChartInstance(item, index)const chartRef = this.$refs.chartRefs[index];const chartInstance = new EChartsWrapper(chartRef, this.getChartOptions(item));// chartInstance.customizeForType(item);this.chartInstances.push(chartInstance);// 设置图表类型// this.chartInstance.customizeForType('bar');// 开始自动滚动// chartInstance.startAutoScroll(3000); // 每3秒滚动一次// 停止自动滚动// chartWrapper.stopAutoScroll();});},methods: {getChartOptions(type) {const commonOptions = {title: {text: type.charAt(0).toUpperCase() + type.slice(1) + ' Chart',},tooltip: {},};switch (type) {case 'bar':return {...commonOptions,tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'}},legend: {},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis: [{type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']}],yAxis: [{type: 'value'}],series: [{name: 'Direct',type: 'bar',emphasis: {focus: 'series'},data: [320, 332, 301, 334, 390, 330, 320]},{name: 'Email',type: 'bar',stack: 'Ad',emphasis: {focus: 'series'},data: [120, 132, 101, 134, 90, 230, 210]},{name: 'Union Ads',type: 'bar',stack: 'Ad',emphasis: {focus: 'series'},data: [220, 182, 191, 234, 290, 330, 310]},{name: 'Video Ads',type: 'bar',stack: 'Ad',emphasis: {focus: 'series'},data: [150, 232, 201, 154, 190, 330, 410]},{name: 'Search Engine',type: 'bar',data: [862, 1018, 964, 1026, 1679, 1600, 1570],emphasis: {focus: 'series'},markLine: {lineStyle: {type: 'dashed'},data: [[{ type: 'min' }, { type: 'max' }]]}},{name: 'Baidu',type: 'bar',barWidth: 5,stack: 'Search Engine',emphasis: {focus: 'series'},data: [620, 732, 701, 734, 1090, 1130, 1120]},{name: 'Google',type: 'bar',stack: 'Search Engine',emphasis: {focus: 'series'},data: [120, 132, 101, 134, 290, 230, 220]},{name: 'Bing',type: 'bar',stack: 'Search Engine',emphasis: {focus: 'series'},data: [60, 72, 71, 74, 190, 130, 110]},{name: 'Others',type: 'bar',stack: 'Search Engine',emphasis: {focus: 'series'},data: [62, 82, 91, 84, 109, 110, 120]}]};case 'line':return {...commonOptions,title: {text: 'Stacked Line'},tooltip: {trigger: 'axis'},legend: {data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},toolbox: {feature: {saveAsImage: {}}},xAxis: {type: 'category',boundaryGap: false,data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{name: 'Email',type: 'line',stack: 'Total',data: [120, 132, 101, 134, 90, 230, 210]},{name: 'Union Ads',type: 'line',stack: 'Total',data: [220, 182, 191, 234, 290, 330, 310]},{name: 'Video Ads',type: 'line',stack: 'Total',data: [150, 232, 201, 154, 190, 330, 410]},{name: 'Direct',type: 'line',stack: 'Total',data: [320, 332, 301, 334, 390, 330, 320]},{name: 'Search Engine',type: 'line',stack: 'Total',data: [820, 932, 901, 934, 1290, 1330, 1320]}]};case 'pie':return {...commonOptions,legend: {top: 'bottom'},toolbox: {show: true,feature: {mark: { show: true },dataView: { show: true, readOnly: false },restore: { show: true },saveAsImage: { show: true }}},series: [{name: 'Nightingale Chart',type: 'pie',radius: [50, 250],center: ['50%', '50%'],roseType: 'area',itemStyle: {borderRadius: 8},data: [{ value: 40, name: 'rose 1' },{ value: 38, name: 'rose 2' },{ value: 32, name: 'rose 3' },{ value: 30, name: 'rose 4' },{ value: 28, name: 'rose 5' },{ value: 26, name: 'rose 6' },{ value: 22, name: 'rose 7' },{ value: 18, name: 'rose 8' }]}]};case 'radar':const dataBJ = [[55, 9, 56, 0.46, 18, 6, 1],[25, 11, 21, 0.65, 34, 9, 2],[56, 7, 63, 0.3, 14, 5, 3],[33, 7, 29, 0.33, 16, 6, 4],[42, 24, 44, 0.76, 40, 16, 5],[82, 58, 90, 1.77, 68, 33, 6],[74, 49, 77, 1.46, 48, 27, 7],[78, 55, 80, 1.29, 59, 29, 8],[267, 216, 280, 4.8, 108, 64, 9],[185, 127, 216, 2.52, 61, 27, 10],[39, 19, 38, 0.57, 31, 15, 11],[41, 11, 40, 0.43, 21, 7, 12],[64, 38, 74, 1.04, 46, 22, 13],[108, 79, 120, 1.7, 75, 41, 14],[108, 63, 116, 1.48, 44, 26, 15],[33, 6, 29, 0.34, 13, 5, 16],[94, 66, 110, 1.54, 62, 31, 17],[186, 142, 192, 3.88, 93, 79, 18],[57, 31, 54, 0.96, 32, 14, 19],[22, 8, 17, 0.48, 23, 10, 20],[39, 15, 36, 0.61, 29, 13, 21],[94, 69, 114, 2.08, 73, 39, 22],[99, 73, 110, 2.43, 76, 48, 23],[31, 12, 30, 0.5, 32, 16, 24],[42, 27, 43, 1, 53, 22, 25],[154, 117, 157, 3.05, 92, 58, 26],[234, 185, 230, 4.09, 123, 69, 27],[160, 120, 186, 2.77, 91, 50, 28],[134, 96, 165, 2.76, 83, 41, 29],[52, 24, 60, 1.03, 50, 21, 30],[46, 5, 49, 0.28, 10, 6, 31]];const dataGZ = [[26, 37, 27, 1.163, 27, 13, 1],[85, 62, 71, 1.195, 60, 8, 2],[78, 38, 74, 1.363, 37, 7, 3],[21, 21, 36, 0.634, 40, 9, 4],[41, 42, 46, 0.915, 81, 13, 5],[56, 52, 69, 1.067, 92, 16, 6],[64, 30, 28, 0.924, 51, 2, 7],[55, 48, 74, 1.236, 75, 26, 8],[76, 85, 113, 1.237, 114, 27, 9],[91, 81, 104, 1.041, 56, 40, 10],[84, 39, 60, 0.964, 25, 11, 11],[64, 51, 101, 0.862, 58, 23, 12],[70, 69, 120, 1.198, 65, 36, 13],[77, 105, 178, 2.549, 64, 16, 14],[109, 68, 87, 0.996, 74, 29, 15],[73, 68, 97, 0.905, 51, 34, 16],[54, 27, 47, 0.592, 53, 12, 17],[51, 61, 97, 0.811, 65, 19, 18],[91, 71, 121, 1.374, 43, 18, 19],[73, 102, 182, 2.787, 44, 19, 20],[73, 50, 76, 0.717, 31, 20, 21],[84, 94, 140, 2.238, 68, 18, 22],[93, 77, 104, 1.165, 53, 7, 23],[99, 130, 227, 3.97, 55, 15, 24],[146, 84, 139, 1.094, 40, 17, 25],[113, 108, 137, 1.481, 48, 15, 26],[81, 48, 62, 1.619, 26, 3, 27],[56, 48, 68, 1.336, 37, 9, 28],[82, 92, 174, 3.29, 0, 13, 29],[106, 116, 188, 3.628, 101, 16, 30],[118, 50, 0, 1.383, 76, 11, 31]];const dataSH = [[91, 45, 125, 0.82, 34, 23, 1],[65, 27, 78, 0.86, 45, 29, 2],[83, 60, 84, 1.09, 73, 27, 3],[109, 81, 121, 1.28, 68, 51, 4],[106, 77, 114, 1.07, 55, 51, 5],[109, 81, 121, 1.28, 68, 51, 6],[106, 77, 114, 1.07, 55, 51, 7],[89, 65, 78, 0.86, 51, 26, 8],[53, 33, 47, 0.64, 50, 17, 9],[80, 55, 80, 1.01, 75, 24, 10],[117, 81, 124, 1.03, 45, 24, 11],[99, 71, 142, 1.1, 62, 42, 12],[95, 69, 130, 1.28, 74, 50, 13],[116, 87, 131, 1.47, 84, 40, 14],[108, 80, 121, 1.3, 85, 37, 15],[134, 83, 167, 1.16, 57, 43, 16],[79, 43, 107, 1.05, 59, 37, 17],[71, 46, 89, 0.86, 64, 25, 18],[97, 71, 113, 1.17, 88, 31, 19],[84, 57, 91, 0.85, 55, 31, 20],[87, 63, 101, 0.9, 56, 41, 21],[104, 77, 119, 1.09, 73, 48, 22],[87, 62, 100, 1, 72, 28, 23],[168, 128, 172, 1.49, 97, 56, 24],[65, 45, 51, 0.74, 39, 17, 25],[39, 24, 38, 0.61, 47, 17, 26],[39, 24, 39, 0.59, 50, 19, 27],[93, 68, 96, 1.05, 79, 29, 28],[188, 143, 197, 1.66, 99, 51, 29],[174, 131, 174, 1.55, 108, 50, 30],[187, 143, 201, 1.39, 89, 53, 31]];const lineStyle = {width: 1,opacity: 0.5};return {...commonOptions,backgroundColor: '#161627',title: {text: 'AQI - Radar',left: 'center',textStyle: {color: '#eee'}},legend: {bottom: 5,data: ['Beijing', 'Shanghai', 'Guangzhou'],itemGap: 20,textStyle: {color: '#fff',fontSize: 14},selectedMode: 'single'},radar: {indicator: [{ name: 'AQI', max: 300 },{ name: 'PM2.5', max: 250 },{ name: 'PM10', max: 300 },{ name: 'CO', max: 5 },{ name: 'NO2', max: 200 },{ name: 'SO2', max: 100 }],shape: 'circle',splitNumber: 5,axisName: {color: 'rgb(238, 197, 102)'},splitLine: {lineStyle: {color: ['rgba(238, 197, 102, 0.1)','rgba(238, 197, 102, 0.2)','rgba(238, 197, 102, 0.4)','rgba(238, 197, 102, 0.6)','rgba(238, 197, 102, 0.8)','rgba(238, 197, 102, 1)'].reverse()}},splitArea: {show: false},axisLine: {lineStyle: {color: 'rgba(238, 197, 102, 0.5)'}}},series: [{name: 'Beijing',type: 'radar',lineStyle: lineStyle,data: dataBJ,symbol: 'none',itemStyle: {color: '#F9713C'},areaStyle: {opacity: 0.1}},{name: 'Shanghai',type: 'radar',lineStyle: lineStyle,data: dataSH,symbol: 'none',itemStyle: {color: '#B3E4A1'},areaStyle: {opacity: 0.05}},{name: 'Guangzhou',type: 'radar',lineStyle: lineStyle,data: dataGZ,symbol: 'none',itemStyle: {color: 'rgb(238, 197, 102)'},areaStyle: {opacity: 0.05}}]};case 'tree':const data = {name: 'flare',children: [{name: 'data',children: [{name: 'converters',children: [{ name: 'Converters', value: 721 },{ name: 'DelimitedTextConverter', value: 4294 }]},{name: 'DataUtil',value: 3322}]},{name: 'display',children: [{ name: 'DirtySprite', value: 8833 },{ name: 'LineSprite', value: 1732 },{ name: 'RectSprite', value: 3623 }]},{name: 'flex',children: [{ name: 'FlareVis', value: 4116 }]},{name: 'query',children: [{ name: 'AggregateExpression', value: 1616 },{ name: 'And', value: 1027 },{ name: 'Arithmetic', value: 3891 },{ name: 'Average', value: 891 },{ name: 'BinaryExpression', value: 2893 },{ name: 'Comparison', value: 5103 },{ name: 'CompositeExpression', value: 3677 },{ name: 'Count', value: 781 },{ name: 'DateUtil', value: 4141 },{ name: 'Distinct', value: 933 },{ name: 'Expression', value: 5130 },{ name: 'ExpressionIterator', value: 3617 },{ name: 'Fn', value: 3240 },{ name: 'If', value: 2732 },{ name: 'IsA', value: 2039 },{ name: 'Literal', value: 1214 },{ name: 'Match', value: 3748 },{ name: 'Maximum', value: 843 },{name: 'methods',children: [{ name: 'add', value: 593 },{ name: 'and', value: 330 },{ name: 'average', value: 287 },{ name: 'count', value: 277 },{ name: 'distinct', value: 292 },{ name: 'div', value: 595 },{ name: 'eq', value: 594 },{ name: 'fn', value: 460 },{ name: 'gt', value: 603 },{ name: 'gte', value: 625 },{ name: 'iff', value: 748 },{ name: 'isa', value: 461 },{ name: 'lt', value: 597 },{ name: 'lte', value: 619 },{ name: 'max', value: 283 },{ name: 'min', value: 283 },{ name: 'mod', value: 591 },{ name: 'mul', value: 603 },{ name: 'neq', value: 599 },{ name: 'not', value: 386 },{ name: 'or', value: 323 },{ name: 'orderby', value: 307 },{ name: 'range', value: 772 },{ name: 'select', value: 296 },{ name: 'stddev', value: 363 },{ name: 'sub', value: 600 },{ name: 'sum', value: 280 },{ name: 'update', value: 307 },{ name: 'variance', value: 335 },{ name: 'where', value: 299 },{ name: 'xor', value: 354 },{ name: '_', value: 264 }]},{ name: 'Minimum', value: 843 },{ name: 'Not', value: 1554 },{ name: 'Or', value: 970 },{ name: 'Query', value: 13896 },{ name: 'Range', value: 1594 },{ name: 'StringUtil', value: 4130 },{ name: 'Sum', value: 791 },{ name: 'Variable', value: 1124 },{ name: 'Variance', value: 1876 },{ name: 'Xor', value: 1101 }]},{name: 'scale',children: [{ name: 'IScaleMap', value: 2105 },{ name: 'LinearScale', value: 1316 },{ name: 'LogScale', value: 3151 },{ name: 'OrdinalScale', value: 3770 },{ name: 'QuantileScale', value: 2435 },{ name: 'QuantitativeScale', value: 4839 },{ name: 'RootScale', value: 1756 },{ name: 'Scale', value: 4268 },{ name: 'ScaleType', value: 1821 },{ name: 'TimeScale', value: 5833 }]}]};var data2 = {name: 'flare',children: [{name: 'flex',children: [{ name: 'FlareVis', value: 4116 }]},{name: 'scale',children: [{ name: 'IScaleMap', value: 2105 },{ name: 'LinearScale', value: 1316 },{ name: 'LogScale', value: 3151 },{ name: 'OrdinalScale', value: 3770 },{ name: 'QuantileScale', value: 2435 },{ name: 'QuantitativeScale', value: 4839 },{ name: 'RootScale', value: 1756 },{ name: 'Scale', value: 4268 },{ name: 'ScaleType', value: 1821 },{ name: 'TimeScale', value: 5833 }]},{name: 'display',children: [{ name: 'DirtySprite', value: 8833 }]}]};return {...commonOptions,tooltip: {trigger: 'item',triggerOn: 'mousemove'},legend: {top: '2%',left: '3%',orient: 'vertical',data: [{name: 'tree1',icon: 'rectangle'},{name: 'tree2',icon: 'rectangle'}],borderColor: '#c23531'},series: [{type: 'tree',name: 'tree1',data: [data],top: '5%',left: '7%',bottom: '2%',right: '60%',symbolSize: 7,label: {position: 'left',verticalAlign: 'middle',align: 'right'},leaves: {label: {position: 'right',verticalAlign: 'middle',align: 'left'}},emphasis: {focus: 'descendant'},expandAndCollapse: true,animationDuration: 550,animationDurationUpdate: 750},{type: 'tree',name: 'tree2',data: [data2],top: '20%',left: '60%',bottom: '22%',right: '18%',symbolSize: 7,label: {position: 'left',verticalAlign: 'middle',align: 'right'},leaves: {label: {position: 'right',verticalAlign: 'middle',align: 'left'}},expandAndCollapse: true,emphasis: {focus: 'descendant'},animationDuration: 550,animationDurationUpdate: 750}]};case 'calendar':const dateList = [['2017-1-1', '初四'],['2017-1-2', '初五'],['2017-1-3', '初六'],['2017-1-4', '初七'],['2017-1-5', '初八', '小寒'],['2017-1-6', '初九'],['2017-1-7', '初十'],['2017-1-8', '十一'],['2017-1-9', '十二'],['2017-1-10', '十三'],['2017-1-11', '十四'],['2017-1-12', '十五'],['2017-1-13', '十六'],['2017-1-14', '十七'],['2017-1-15', '十八'],['2017-1-16', '十九'],['2017-1-17', '二十'],['2017-1-18', '廿一'],['2017-1-19', '廿二'],['2017-1-20', '廿三', '大寒'],['2017-1-21', '廿四'],['2017-1-22', '廿五'],['2017-1-23', '廿六'],['2017-1-24', '廿七'],['2017-1-25', '廿八'],['2017-1-26', '廿九'],['2017-1-27', '三十'],['2017-1-28', '正月'],['2017-1-29', '初二'],['2017-1-30', '初三'],['2017-1-31', '初四'],['2017-2-1', '初五'],['2017-2-2', '初六'],['2017-2-3', '初七', '立春'],['2017-2-4', '初八'],['2017-2-5', '初九'],['2017-2-6', '初十'],['2017-2-7', '十一'],['2017-2-8', '十二'],['2017-2-9', '十三'],['2017-2-10', '十四'],['2017-2-11', '十五'],['2017-2-12', '十六'],['2017-2-13', '十七'],['2017-2-14', '十八'],['2017-2-15', '十九'],['2017-2-16', '二十'],['2017-2-17', '廿一'],['2017-2-18', '廿二', '雨水'],['2017-2-19', '廿三'],['2017-2-20', '廿四'],['2017-2-21', '廿五'],['2017-2-22', '廿六'],['2017-2-23', '廿七'],['2017-2-24', '廿八'],['2017-2-25', '廿九'],['2017-2-26', '二月'],['2017-2-27', '初二'],['2017-2-28', '初三'],['2017-3-1', '初四'],['2017-3-2', '初五'],['2017-3-3', '初六'],['2017-3-4', '初七'],['2017-3-5', '初八', '驚蟄'],['2017-3-6', '初九'],['2017-3-7', '初十'],['2017-3-8', '十一'],['2017-3-9', '十二'],['2017-3-10', '十三'],['2017-3-11', '十四'],['2017-3-12', '十五'],['2017-3-13', '十六'],['2017-3-14', '十七'],['2017-3-15', '十八'],['2017-3-16', '十九'],['2017-3-17', '二十'],['2017-3-18', '廿一'],['2017-3-19', '廿二'],['2017-3-20', '廿三', '春分'],['2017-3-21', '廿四'],['2017-3-22', '廿五'],['2017-3-23', '廿六'],['2017-3-24', '廿七'],['2017-3-25', '廿八'],['2017-3-26', '廿九'],['2017-3-27', '三十'],['2017-3-28', '三月'],['2017-3-29', '初二'],['2017-3-30', '初三'],['2017-3-31', '初四'],['2017-4-1', '初五'],['2017-4-2', '初六'],['2017-4-3', '初七'],['2017-4-4', '初八', '清明'],['2017-4-5', '初九'],['2017-4-6', '初十'],['2017-4-7', '十一'],['2017-4-8', '十二'],['2017-4-9', '十三'],['2017-4-10', '十四'],['2017-4-11', '十五'],['2017-4-12', '十六'],['2017-4-13', '十七'],['2017-4-14', '十八'],['2017-4-15', '十九'],['2017-4-16', '二十'],['2017-4-17', '廿一'],['2017-4-18', '廿二'],['2017-4-19', '廿三'],['2017-4-20', '廿四', '穀雨'],['2017-4-21', '廿五'],['2017-4-22', '廿六'],['2017-4-23', '廿七'],['2017-4-24', '廿八'],['2017-4-25', '廿九'],['2017-4-26', '四月'],['2017-4-27', '初二'],['2017-4-28', '初三'],['2017-4-29', '初四'],['2017-4-30', '初五'],['2017-5-1', '初六'],['2017-5-2', '初七'],['2017-5-3', '初八'],['2017-5-4', '初九'],['2017-5-5', '初十', '立夏'],['2017-5-6', '十一'],['2017-5-7', '十二'],['2017-5-8', '十三'],['2017-5-9', '十四'],['2017-5-10', '十五'],['2017-5-11', '十六'],['2017-5-12', '十七'],['2017-5-13', '十八'],['2017-5-14', '十九'],['2017-5-15', '二十'],['2017-5-16', '廿一'],['2017-5-17', '廿二'],['2017-5-18', '廿三'],['2017-5-19', '廿四'],['2017-5-20', '廿五'],['2017-5-21', '廿六', '小滿'],['2017-5-22', '廿七'],['2017-5-23', '廿八'],['2017-5-24', '廿九'],['2017-5-25', '三十'],['2017-5-26', '五月'],['2017-5-27', '初二'],['2017-5-28', '初三'],['2017-5-29', '初四'],['2017-5-30', '初五'],['2017-5-31', '初六'],['2017-6-1', '初七'],['2017-6-2', '初八'],['2017-6-3', '初九'],['2017-6-4', '初十'],['2017-6-5', '十一', '芒種'],['2017-6-6', '十二'],['2017-6-7', '十三'],['2017-6-8', '十四'],['2017-6-9', '十五'],['2017-6-10', '十六'],['2017-6-11', '十七'],['2017-6-12', '十八'],['2017-6-13', '十九'],['2017-6-14', '二十'],['2017-6-15', '廿一'],['2017-6-16', '廿二'],['2017-6-17', '廿三'],['2017-6-18', '廿四'],['2017-6-19', '廿五'],['2017-6-20', '廿六'],['2017-6-21', '廿七', '夏至'],['2017-6-22', '廿八'],['2017-6-23', '廿九'],['2017-6-24', '六月'],['2017-6-25', '初二'],['2017-6-26', '初三'],['2017-6-27', '初四'],['2017-6-28', '初五'],['2017-6-29', '初六'],['2017-6-30', '初七'],['2017-7-1', '初八'],['2017-7-2', '初九'],['2017-7-3', '初十'],['2017-7-4', '十一'],['2017-7-5', '十二'],['2017-7-6', '十三'],['2017-7-7', '十四', '小暑'],['2017-7-8', '十五'],['2017-7-9', '十六'],['2017-7-10', '十七'],['2017-7-11', '十八'],['2017-7-12', '十九'],['2017-7-13', '二十'],['2017-7-14', '廿一'],['2017-7-15', '廿二'],['2017-7-16', '廿三'],['2017-7-17', '廿四'],['2017-7-18', '廿五'],['2017-7-19', '廿六'],['2017-7-20', '廿七'],['2017-7-21', '廿八'],['2017-7-22', '廿九', '大暑'],['2017-7-23', '閏六'],['2017-7-24', '初二'],['2017-7-25', '初三'],['2017-7-26', '初四'],['2017-7-27', '初五'],['2017-7-28', '初六'],['2017-7-29', '初七'],['2017-7-30', '初八'],['2017-7-31', '初九'],['2017-8-1', '初十'],['2017-8-2', '十一'],['2017-8-3', '十二'],['2017-8-4', '十三'],['2017-8-5', '十四'],['2017-8-6', '十五'],['2017-8-7', '十六', '立秋'],['2017-8-8', '十七'],['2017-8-9', '十八'],['2017-8-10', '十九'],['2017-8-11', '二十'],['2017-8-12', '廿一'],['2017-8-13', '廿二'],['2017-8-14', '廿三'],['2017-8-15', '廿四'],['2017-8-16', '廿五'],['2017-8-17', '廿六'],['2017-8-18', '廿七'],['2017-8-19', '廿八'],['2017-8-20', '廿九'],['2017-8-21', '三十'],['2017-8-22', '七月'],['2017-8-23', '初二', '處暑'],['2017-8-24', '初三'],['2017-8-25', '初四'],['2017-8-26', '初五'],['2017-8-27', '初六'],['2017-8-28', '初七'],['2017-8-29', '初八'],['2017-8-30', '初九'],['2017-8-31', '初十'],['2017-9-1', '十一'],['2017-9-2', '十二'],['2017-9-3', '十三'],['2017-9-4', '十四'],['2017-9-5', '十五'],['2017-9-6', '十六'],['2017-9-7', '十七', '白露'],['2017-9-8', '十八'],['2017-9-9', '十九'],['2017-9-10', '二十'],['2017-9-11', '廿一'],['2017-9-12', '廿二'],['2017-9-13', '廿三'],['2017-9-14', '廿四'],['2017-9-15', '廿五'],['2017-9-16', '廿六'],['2017-9-17', '廿七'],['2017-9-18', '廿八'],['2017-9-19', '廿九'],['2017-9-20', '八月'],['2017-9-21', '初二'],['2017-9-22', '初三'],['2017-9-23', '初四', '秋分'],['2017-9-24', '初五'],['2017-9-25', '初六'],['2017-9-26', '初七'],['2017-9-27', '初八'],['2017-9-28', '初九'],['2017-9-29', '初十'],['2017-9-30', '十一'],['2017-10-1', '十二'],['2017-10-2', '十三'],['2017-10-3', '十四'],['2017-10-4', '十五'],['2017-10-5', '十六'],['2017-10-6', '十七'],['2017-10-7', '十八'],['2017-10-8', '十九', '寒露'],['2017-10-9', '二十'],['2017-10-10', '廿一'],['2017-10-11', '廿二'],['2017-10-12', '廿三'],['2017-10-13', '廿四'],['2017-10-14', '廿五'],['2017-10-15', '廿六'],['2017-10-16', '廿七'],['2017-10-17', '廿八'],['2017-10-18', '廿九'],['2017-10-19', '三十'],['2017-10-20', '九月'],['2017-10-21', '初二'],['2017-10-22', '初三'],['2017-10-23', '初四', '霜降'],['2017-10-24', '初五'],['2017-10-25', '初六'],['2017-10-26', '初七'],['2017-10-27', '初八'],['2017-10-28', '初九'],['2017-10-29', '初十'],['2017-10-30', '十一'],['2017-10-31', '十二'],['2017-11-1', '十三'],['2017-11-2', '十四'],['2017-11-3', '十五'],['2017-11-4', '十六'],['2017-11-5', '十七'],['2017-11-6', '十八'],['2017-11-7', '十九', '立冬'],['2017-11-8', '二十'],['2017-11-9', '廿一'],['2017-11-10', '廿二'],['2017-11-11', '廿三'],['2017-11-12', '廿四'],['2017-11-13', '廿五'],['2017-11-14', '廿六'],['2017-11-15', '廿七'],['2017-11-16', '廿八'],['2017-11-17', '廿九'],['2017-11-18', '十月'],['2017-11-19', '初二'],['2017-11-20', '初三'],['2017-11-21', '初四'],['2017-11-22', '初五', '小雪'],['2017-11-23', '初六'],['2017-11-24', '初七'],['2017-11-25', '初八'],['2017-11-26', '初九'],['2017-11-27', '初十'],['2017-11-28', '十一'],['2017-11-29', '十二'],['2017-11-30', '十三'],['2017-12-1', '十四'],['2017-12-2', '十五'],['2017-12-3', '十六'],['2017-12-4', '十七'],['2017-12-5', '十八'],['2017-12-6', '十九'],['2017-12-7', '二十', '大雪'],['2017-12-8', '廿一'],['2017-12-9', '廿二'],['2017-12-10', '廿三'],['2017-12-11', '廿四'],['2017-12-12', '廿五'],['2017-12-13', '廿六'],['2017-12-14', '廿七'],['2017-12-15', '廿八'],['2017-12-16', '廿九'],['2017-12-17', '三十'],['2017-12-18', '十一月'],['2017-12-19', '初二'],['2017-12-20', '初三'],['2017-12-21', '初四'],['2017-12-22', '初五', '冬至'],['2017-12-23', '初六'],['2017-12-24', '初七'],['2017-12-25', '初八'],['2017-12-26', '初九'],['2017-12-27', '初十'],['2017-12-28', '十一'],['2017-12-29', '十二'],['2017-12-30', '十三'],['2017-12-31', '十四']];const heatmapData = [];const lunarData = [];for (let i = 0; i < dateList.length; i++) {heatmapData.push([dateList[i][0], Math.random() * 300]);lunarData.push([dateList[i][0], 1, dateList[i][1], dateList[i][2]]);}return {...commonOptions,tooltip: {formatter: function (params) {return '降雨量: ' + params.value[1].toFixed(2);}},visualMap: {show: false,min: 0,max: 300,calculable: true,seriesIndex: [2],orient: 'horizontal',left: 'center',bottom: 20,inRange: {color: ['#e0ffff', '#006edd'],opacity: 0.3},controller: {inRange: {opacity: 0.5}}},calendar: [{left: 'center',top: 'middle',cellSize: [70, 70],yearLabel: { show: false },orient: 'vertical',dayLabel: {firstDay: 1,nameMap: 'cn'},monthLabel: {show: false},range: '2017-03'}],series: [{type: 'scatter',coordinateSystem: 'calendar',symbolSize: 0,label: {show: true,formatter: function (params) {var d = echarts.number.parseDate(params.value[0]);return d.getDate() + '\n\n' + params.value[2] + '\n\n';},color: '#000'},data: lunarData,silent: true},{type: 'scatter',coordinateSystem: 'calendar',symbolSize: 0,label: {show: true,formatter: function (params) {return '\n\n\n' + (params.value[3] || '');},fontSize: 14,fontWeight: 700,color: '#a00'},data: lunarData,silent: true},{name: '降雨量',type: 'heatmap',coordinateSystem: 'calendar',data: heatmapData}]};case 'gauge':return {...commonOptions,series: [{type: 'gauge',center: ['50%', '60%'],startAngle: 200,endAngle: -20,min: 0,max: 60,splitNumber: 12,itemStyle: {color: '#FFAB91'},progress: {show: true,width: 30},pointer: {show: false},axisLine: {lineStyle: {width: 30}},axisTick: {distance: -45,splitNumber: 5,lineStyle: {width: 2,color: '#999'}},splitLine: {distance: -52,length: 14,lineStyle: {width: 3,color: '#999'}},axisLabel: {distance: -20,color: '#999',fontSize: 20},anchor: {show: false},title: {show: false},detail: {valueAnimation: true,width: '60%',lineHeight: 40,borderRadius: 8,offsetCenter: [0, '-15%'],fontSize: 60,fontWeight: 'bolder',formatter: '{value} °C',color: 'inherit'},data: [{value: 20}]},{type: 'gauge',center: ['50%', '60%'],startAngle: 200,endAngle: -20,min: 0,max: 60,itemStyle: {color: '#FD7347'},progress: {show: true,width: 8},pointer: {show: false},axisLine: {show: false},axisTick: {show: false},splitLine: {show: false},axisLabel: {show: false},detail: {show: false},data: [{value: 20}]}]};case 'funnel':return {...commonOptions,title: {text: 'Funnel Compare',subtext: 'Fake Data',left: 'left',top: 'bottom'},tooltip: {trigger: 'item',formatter: '{a} <br/>{b} : {c}%'},toolbox: {show: true,orient: 'vertical',top: 'center',feature: {dataView: { readOnly: false },restore: {},saveAsImage: {}}},legend: {orient: 'vertical',left: 'left',data: ['Prod A', 'Prod B', 'Prod C', 'Prod D', 'Prod E']},series: [{name: 'Funnel',type: 'funnel',width: '40%',height: '45%',left: '5%',top: '50%',funnelAlign: 'right',data: [{ value: 60, name: 'Prod C' },{ value: 30, name: 'Prod D' },{ value: 10, name: 'Prod E' },{ value: 80, name: 'Prod B' },{ value: 100, name: 'Prod A' }]},{name: 'Pyramid',type: 'funnel',width: '40%',height: '45%',left: '5%',top: '5%',sort: 'ascending',funnelAlign: 'right',data: [{ value: 60, name: 'Prod C' },{ value: 30, name: 'Prod D' },{ value: 10, name: 'Prod E' },{ value: 80, name: 'Prod B' },{ value: 100, name: 'Prod A' }]},{name: 'Funnel',type: 'funnel',width: '40%',height: '45%',left: '55%',top: '5%',funnelAlign: 'left',data: [{ value: 60, name: 'Prod C' },{ value: 30, name: 'Prod D' },{ value: 10, name: 'Prod E' },{ value: 80, name: 'Prod B' },{ value: 100, name: 'Prod A' }]},{name: 'Pyramid',type: 'funnel',width: '40%',height: '45%',left: '55%',top: '50%',sort: 'ascending',funnelAlign: 'left',data: [{ value: 60, name: 'Prod C' },{ value: 30, name: 'Prod D' },{ value: 10, name: 'Prod E' },{ value: 80, name: 'Prod B' },{ value: 100, name: 'Prod A' }]}]};default:break;}},updateChartData() {this.chartInstance.refreshData(0, [130, 210, 160, 90, 80, 120]);},beforeDestroy() {// 销毁图表实例，避免内存泄漏if (this.chartInstance) {this.chartInstance.dispose();}},},
};
</script><style scoped>
.chart-container {margin: 20px;
}.chart-header {display: inline-block;width: 50%;height: 650px;margin: 0 auto;text-align: center;align-items: center;justify-content: center;
}
</style>