Echarts——饼图折线图柱状图相互转换
前言
项目里使用的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)
}
学无止境,谦卑而行.
