[echarts] 饼图折线图柱状图相互转换

柱状图数据转换

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——饼图折线图柱状图相互转换