1.在页面中按需加载
let echarts = require("echarts/lib/echarts");
// 引入饼状图组件
require("echarts/lib/chart/pie");
// 引入提示框和title组件
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");
2.创建容器
<div class="pie">
<!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
<div id="main1" style="float:left;width:493px;height: 530px"></div>
</div>
3.在js里写
mounted() {
this.initData();
}
methods: {
//初始化数据
initData() {
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById("main1"));
window.onresize = myChart.resize;
// 绘制图表
myChart.setOption({
series: [
{
name: "部门报销比例",
type: "pie",
radius: ["50%", "70%"],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: "center",
//{b}是name {c}是value
formatter: ["{a|{b}}", "{b|{c}元}"].join("\n"),
//在 rich 里面,可以自定义富文本样式。{a|}是标签
rich: {
a: {
fontSize: 40,
lineHeight: 30
},
b: {
fontSize: 21,
lineHeight: 60,
height: 60
}
}
},
emphasis: {
show: true,
textStyle: {
fontSize: "30",
fontWeight: "bold"
}
}
},
labelLine: {
normal: {
show: false
}
},
data: this.data,
color: ["#f9c270", "#40c4f4", "#999", "pink", "blue", "red"]
}
]
});
//设置默认选中高亮部分
myChart.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex: 0
});
myChart.on("mouseover", function(e) {
console.log(e);
//当检测到鼠标悬停事件,取消默认选中高亮
myChart.dispatchAction({
type: "downplay",
seriesIndex: 0,
dataIndex: 0
});
//高亮显示悬停的那块
myChart.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex: e.dataIndex
});
});
//检测鼠标移出后显示之前默认高亮的那块
myChart.on("mouseout", function(e) {
myChart.dispatchAction({
type: "downplay",
seriesIndex: 0,
dataIndex: e.dataIndex
});
myChart.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex: 0
});
});
}
}
``