vue echarts 饼图(环形图) ，echarts版本为5.3.3
可以自定义颜色
javascript
<template>
<div>
<div id="pieChart1"
ref="pieChartRef1"
style="width: 100%; height: 250px"></div>
</div>
</template>
<script>
import * as echarts from 'echarts';
export default {
name: '',
props: {},
components: '',
data() {
return {
chart: null,
_thisForChart: null,
_thisForWindow: null,
colorItem: {
"北京": '#ff6161',
"上海": '#e0815b',
"广州": '#ffaf33',
"深圳": '#637be6',
"成都": '#a1b2ff',
"西安": '#b3daff',
},
}
},
created() {},
mounted () {
this.$nextTick(() => {
this.initPieChart();
this.addEventListenerToSidebarContainer(this)
this.addEventListenerToWindowResize(this)
});
},
beforeDestroy () {
this.removeEventListenerToSidebarContainer()
this.removeEventListenerToWindowResize()
},
computed: {},
watch: {},
methods: {
initPieChart () {
let echartData = [
{
name:'北京',
value: '0.99',
},
{
name:'上海',
value: '0.29',
},
{
name:'广州',
value: '0.44',
},
{
name:'深圳',
value: '0.14',
},
{
name:'成都',
value: '0.21',
},
{
name:'西安',
value: '0.77',
},
]
var chartDom = document.getElementById('pieChart1');
this.chart = echarts.init(chartDom);
let handleEchartData = echartData .map((item3) => {
return {
value: item3.value,
name: item3.name,
itemStyle: {
color: this.colorItem[item3.name]
}
}
})
let option = {
// color: ['#EE3F3F','#ff6161','#e0815b','#e0a188','#FFB441','#FFDAA1',],
// tooltip: {
// show: true,
// trigger: 'item',
// backgroundColor: 'rgba( 0, 0, 0,0.7)',
// borderColor: 'rgba( 0, 0, 0,0.7)',
// triggerOn: "click", // 点击事件
// enterable: true, // 鼠标可移入提示框浮层中，默认为false
// position: ['53%','40%'],
// fontSize: 10,
// formatter:function(params, ticket,callback) {
// 实际请求接口，获取对应的数据
// let req_data = {
// name: params.name,
// }
// testApi.getDetail(req_data).then((res) => {
// if (res.data && res.data.length) {
// for(let i = 0; i < res.data.length; i++) {
// list.push(
// "<div style='display:flex;align-items:center;justify-content:space-between;transform:scale(0.9)'><span style='padding-right:10px;margin-bottom: -20px;color: #fff;'>" + res.data[i].code + "</span>" + "<span style='padding-right:10px;margin-bottom: -20px;color: #fff;'>" + res.data[i].name + "</span>"+ "<span style='padding-right:10px;margin-bottom: -20px;color: #fff;'>" + "权重:" + res.data[i].WEIGHT + '%' + "</span></div>"
// )
// }
// listItem = list.length < 12 ? "<div style='margin-bottom:8px;padding-bottom:8px;'>" + list.join('<br/>') + "</div>" : "<div style='height: 235px;overflow-y: auto;margin-bottom:8px;padding-bottom:8px;'>" + list.join('<br/>') + "</div>"
// callback(ticket, listItem)
// } else {
// listItem = "<div>"+ '数据为空' + "</div>"
// callback(ticket, listItem)
// }
// })
// return "<span>"+ "数据请求中..." + "</span>"
// }
// },
legend: {
bottom: 0,
textStyle: {
rich: {
name: {},
value: {
align: 'right',
padding: [0, -80, 0 ,0],
}
}
},
formatter: function(name) {
let value
for (let i = 0; i < echartData.length; i++) {
if (echartData[i].name === name) {
value = echartData[i].value
}
}
var val = value
return [`{name|${name}}` + '：' + `{value|${val}%}`]
},
},
series: [
{
name: '',
type: 'pie',
radius: ['45%', '65%'],
center:['50%' ,'40%'],
avoidLabelOverlap: true,
label: {
show: false,
position: 'center',
// formatter: function(params) {
// return '{name|' + params.name + '}' + '\n' + '{value|' + params.data.value + '%' + '}'
// },
// rich: {
// name: {
// fontSize: 14,
// },
// value: {
// fontSize: 20,
// lineHeight: 30,
// }
// }
},
emphasis: {
label: {
show: true,
lineHeight: 30,
formatter: function(params) {
return '{name|' + params.name + '}' + '\n' + '{value|' + params.data.value + '%' + '}'
},
rich: {
name: {
// color: "inherit",
fontSize: 14,
},
value: {
color: "inherit",
// fontSize: 20,
// lineHeight: 30,
}
},
textStyle: {
fontSize: 20,
fontWeight: 700,
},
}
},
labelLine: {
show: false,
length: 7,
length2: 6,
lineStyle: {}
},
data: handleEchartData,
}
]
};
this.chart.setOption(option);
},
// 监听侧边栏导航的宽度发生变化
addEventListenerToSidebarContainer(_this) {
let sidebarContainer = document.getElementsByClassName("sidebar-container")[0];
this._thisForChart = _this;
sidebarContainer &&
sidebarContainer.addEventListener("transitionend", this.sidebarResizeHandler);
},
removeEventListenerToSidebarContainer() {
let sidebarContainer = document.getElementsByClassName("sidebar-container")[0];
this._thisForChart = null
sidebarContainer &&
sidebarContainer.removeEventListener("transitionend", this.sidebarResizeHandler);
},
sidebarResizeHandler(e) {
if (e.propertyName === "width") {
this._thisForChart.chart.resize();
}
},
// window 的尺寸发生变化的时候 会执行图表的resize
addEventListenerToWindowResize(_this) {
this._thisForWindow = _this;
window.addEventListener("resize", this.windowResizeHandler);
},
removeEventListenerToWindowResize(_this) {
this. _thisForWindow = null
window.removeEventListener("resize", this.windowResizeHandler);
},
windowResizeHandler(e) {
this._thisForWindow.chart.resize();
},
},
}
</script>
<style lang="scss" scoped>
</style>展示效果图：
