- 安装 echarts 依赖
npm install echarts --save
- 在需要的组件页面中引入echarts
<span style="font-weight:600">操作系统</span>
<div
class="echart"
id="system-echart"
:style="{ float: 'left', width: '100%', height: '230px' }"
></div>
<script>
import * as echarts from "echarts";
import { pieEchart } from "../util/echart";
export default {
name: "PieEchart",
data() {
return {
systemName: "操作系统",
systemData: [
{ value: 300, name: "windows" },
{ value: 200, name: "macos" },
{ value: 499, name: "android" },
{ value: 655, name: "ios" }
]
};
},
mounted() {
let system_echart = document.getElementById("system-echart");
this.systeminitChart(system_echart, this.systemName, this.systemData);
},
methods: {
systeminitChart(id, name, pieData) {
this.renderInitEchart(id, name, pieData);
}
renderInitEchart(id, name, pieData) {
let getchart = echarts.init(id);
let option = pieEchart(name, pieData);
getchart.setOption(option);
getchart.on("mouseover", function() {
getchart.setOption({
series: [
{
label: {
show: false
}
}
]
});
});
getchart.on("mouseout", function() {
getchart.setOption({
series: [
{
label: {
show: true
}
}
]
});
});
//随着屏幕大小调节图表
window.addEventListener("resize", () => {
getchart.resize();
});
}
}
};
</script>
util/echarts.js
function pieEchart(name, data) {
let option = {
tooltip: {
trigger: "item"
},
legend: {
type: "scroll",
orient: "vertical",
left: 180,
top: 30,
icon: "rect",
itemHeight: 44,
itemWidth: 10,
selectedMode: false,
textStyle: {
color: "#fff",
fontSize: 16,
rich: {
name: {
fontSize: 14,
color: "#011",
padding: [4, 0, 0, 0]
},
num: {
fontSize: 22,
fontWeight: 600,
padding: [10, 0, 0, 0],
color: "#000"
}
}
},
formatter: function(name) {
let tarValue;
for (let i = 0; i < data.length; i++) {
if (data[i].name == name) {
tarValue = data[i].value;
}
}
return [`{name|${name}}`, `{num|${tarValue}}`].join("\n");
}
},
series: [
{
name,
center: ["15%", "42%"],
type: "pie",
radius: ["40%", "60%"],
avoidLabelOverlap: false,
label: {
show: true,
position: "center",
formatter: "{c}",
fontSize: "26",
fontWeight: "600"
},
emphasis: {
label: {
show: true,
fontSize: "26",
fontWeight: "600"
}
},
labelLine: {
show: false
},
data
}
]
};
return option;
}
export { pieEchart };