安装
npm install echars --save
main.js
import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts
使用
<template>
<div id="myChart" style="width: 200px; height: 200px"></div>
</template>
<script>
import * as echarts from "echarts";
// 按需加载
// 引入饼图
require("echarts/lib/chart/pie");
// 引入提示框等组件
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");
export default{
methods:{
// echars饼图
drawLine() {
// 基于准备好的dom，初始化echarts实例
// 绘制图表
this.myChart = echarts.init(document.getElementById("myChart"));
let urll = "xxxx";
axios.get(urll).then((response) => {
this.isShow = response.data.data.isNo;
this.fundraising = response.data.data.fundraising;
if (this.fundraising) {
this.totalMoney = this.fundraising.totalMoney;
this.receivedMoney = this.fundraising.receivedMoney;
this.lackMoney = this.fundraising.lackMoney;
this.proportion = this.fundraising.proportion; // 5,967,500
this.rr = new RegExp(",", "g"); // 去掉所有的逗号
}
if (this.proportion >= 1) {
this.protion = 100;
} else {
this.protion = this.proportion;
}
this.myChart.setOption({
title: {
text: this.protion + "%",
// text: 11,
left: "center",
top: "43%",
textStyle: {
fontSize: 13,
lineHeight: 20,
},
},
series: [
{
name: "咨询数量",
type: "pie",
radius: ["30%", "36%"],
labelLine: {
show: false,
length: 15,
length2: 60,
},
itemStyle: {
normal: {
color: function (params) {
var colorList = ["#F34F42", "#dddddd"];
return colorList[params.dataIndex];
},
},
},
data: [
{
value: Number(this.receivedMoney.replace(this.rr, "")),
},
{
value: Number(this.lackMoney.replace(this.rr, "")),
},
],
},
],
});
});
},
},
mounted() {
this.drawLine();
}
}
</script>