前言
项目里使用的echarts版本是4.9.0,这里就用该版本做演示;
配置项: echarts option
codesandbox示例: Echarts数据转换
内容
鉴于echarts折线图和柱状图可以直接通过
toolbox转换,所以我们只需要在toolbox中增加一个和饼图进行转换的方法即可
柱状图数据转换
barData() { let that = this let xAxisData = that.list.map((item) => item.name) let seriesData = that.list.map((item) => item.value) this.options = { title: { ...dOptions.title, text: this.title }, tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, toolbox: { show: true, feature: { dataView: { readOnly: false }, myPie: { show: true, title: '切换为饼状图', icon: 'path://M512 98.304C282.624 98.304 98.304 282.624 98.304 512s184.32 413.696 413.696 413.696c229.376 0 413.696-184.32 413.696-413.696S741.376 98.304 512 98.304zM888.832 491.52l-331.776 0 233.472-233.472C847.872 323.584 884.736 401.408 888.832 491.52zM512 888.832c-208.896 0-376.832-167.936-376.832-376.832 0-208.896 167.936-376.832 376.832-376.832 98.304 0 184.32 36.864 253.952 98.304l-266.24 266.24c-4.096 4.096-4.096 8.192-4.096 12.288 0 12.288 8.192 20.48 20.48 20.48l376.832 0C876.544 729.088 712.704 888.832 512 888.832z', onclick: function () { that.pieData() that.initChart() } }, magicType: { show: true, type: ['bar', 'line'] }, restore: {}, saveAsImage: {} } }, xAxis: { type: 'category', data: xAxisData }, yAxis: { type: 'value' }, series: [ { data: seriesData, type: 'bar', showBackground: true, backgroundStyle: { color: 'rgba(180, 180, 180, 0.2)' } } ] } },
折线图数据转换
lineData() { let that = this let xAxisData = that.list.map((item) => item.name) let seriesData = that.list.map((item) => item.value) this.options = { title: { ...dOptions.title, text: this.title }, tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, toolbox: { show: true, feature: { dataView: { readOnly: false }, myPie: { show: true, title: '切换为饼状图', icon: 'path://M512 98.304C282.624 98.304 98.304 282.624 98.304 512s184.32 413.696 413.696 413.696c229.376 0 413.696-184.32 413.696-413.696S741.376 98.304 512 98.304zM888.832 491.52l-331.776 0 233.472-233.472C847.872 323.584 884.736 401.408 888.832 491.52zM512 888.832c-208.896 0-376.832-167.936-376.832-376.832 0-208.896 167.936-376.832 376.832-376.832 98.304 0 184.32 36.864 253.952 98.304l-266.24 266.24c-4.096 4.096-4.096 8.192-4.096 12.288 0 12.288 8.192 20.48 20.48 20.48l376.832 0C876.544 729.088 712.704 888.832 512 888.832z', onclick: function () { that.pieData() that.initChart() } }, magicType: { show: true, type: ['bar', 'line'] }, restore: {}, saveAsImage: {} } }, xAxis: { type: 'category', data: xAxisData }, yAxis: { type: 'value' }, series: [ { data: seriesData, type: 'line', smooth: true } ] } },
饼图数据转换
pieData() { let that = this this.options = { title: { ...dOptions.title, text: this.title }, toolbox: { show: true, feature: { dataView: { readOnly: false }, myPie: { show: true, title: '切换为饼状图', icon: 'path://M512 98.304C282.624 98.304 98.304 282.624 98.304 512s184.32 413.696 413.696 413.696c229.376 0 413.696-184.32 413.696-413.696S741.376 98.304 512 98.304zM888.832 491.52l-331.776 0 233.472-233.472C847.872 323.584 884.736 401.408 888.832 491.52zM512 888.832c-208.896 0-376.832-167.936-376.832-376.832 0-208.896 167.936-376.832 376.832-376.832 98.304 0 184.32 36.864 253.952 98.304l-266.24 266.24c-4.096 4.096-4.096 8.192-4.096 12.288 0 12.288 8.192 20.48 20.48 20.48l376.832 0C876.544 729.088 712.704 888.832 512 888.832z', onclick: function () { that.pieData() that.initChart() } }, myBar: { show: true, title: '切换为柱状图', icon: 'path://M6.7,22.9h10V48h-10V22.9zM24.9,13h10v35h-10V13zM43.2,2h10v46h-10V2zM3.1,58h53.7', onclick: function () { that.barData() that.initChart() } }, myLine: { show: true, title: '切换为折线图', icon: 'path://M4.1,28.9h7.1l9.3-22l7.4,38l9.7-19.7l3,12.8h14.9M4.1,58h51.4', onclick: function () { that.lineData() that.initChart() } }, restore: {}, saveAsImage: {} } }, color: ['#007950', '#0097AF', '#376BB9', '#DF993E', '#AD475F'], tooltip: { trigger: 'item', formatter: '{b} : {c} ({d}%)' }, legend: { icon: 'circle', right: 6, top: '20%', width: '50%', itemWidth: 8, itemHeight: 8, textStyle: { padding: 4, rich: { a: { color: '#969AA8', lineHeight: 30, fontSize: 14, width: 90 }, b: { fontSize: 14, fontWeight: 'bolder', color: '#000' } } }, data: that.list, formatter: function (name) { var total = 0 var target for (var i = 0, l = that.list.length; i < l; i++) { total += that.list[i].value if (that.list[i].name == name) { target = that.list[i].value } } let nameResult = name.length > 6 ? name.slice(0, 6) + '...' : name return '{b|' + ((target / total) * 100).toFixed(2) + '%}\n{a|' + nameResult + '}' } }, series: [ { type: 'pie', label: { show: false }, radius: [40, 75], center: ['25%', '55%'], data: that.list, animationEasing: 'cubicInOut', animationDuration: 2600 } ] } },
echarts初始化
initChart() { this.chart = echarts.init(this.$el, 'macarons') this.chart.resize() this.chart.clear() this.chart.setOption(this.options, true) }
学无止境,谦卑而行.
