近7天 v-model="checkedModels" @change="handleCheckedCitiesChange" fill="#091F2A" > v-for="(item, index) in models" :label="item" :key="index" class="item" >{{ item }} type="text" v-model="keyword" placeholder="请输入搜索内容" class="zt-center-search-input" /> 搜索 class="download" style="color: #23fffc; cursor: pointer" @click="$router.back()" > 返回
const modelData = ["近3天", "近7天", "近1个月", "近3个月"];
export default {
data() {
return {
checkedModels: [],
model_show: false,
models: modelData,
isIndeterminate: true,
checkAll: false,
keyword: "",
};
},
components: {},
mounted() {
this.getPieChart();
},
methods: {
handleCheckAllChange(val) {
// console.log(val);
this.checkedModels = val ? modelData : [];
this.isIndeterminate = false;
},
handleCheckedCitiesChange(value) {
// console.log(value);
let checkedCount = value.length;
this.checkAll = checkedCount === this.models.length;
console.log(this.checkAll);
this.isIndeterminate =
checkedCount > 0 && checkedCount < this.models.length;
},
getPieChart() {
const chart = this.$refs.chart;
const myChart = this.$echarts.init(chart);
let dataPieEcharts = this.$route.params.pieEchartdata;
console.log(dataPieEcharts);
let formatterData = [
{ value: dataPieEcharts.scenicPersonCount, name: "从业人员" },
{ value: dataPieEcharts.cameraCount, name: "摄像头" },
{ value: dataPieEcharts.scenicArchivesCount, name: "处罚信息" },
{ value: dataPieEcharts.punishCount, name: "案事件" },
{ value: dataPieEcharts.personalizeCount, name: "个性化" },
];
if (chart) {
const option = {
tooltip: {
trigger: "item",
},
legend: {
data: ["从业人员", "摄像头", "处罚信息", "案事件", "个性化"],
// data: [],
formatter: (name) => {
console.log(name);
//重点在这里 自定义图例
let person;
// formatterData 接口数据
for (let i = 0; i < formatterData.length; i++) {
if (formatterData[i].name == name) {
console.log(formatterData[i].value);
person = formatterData[i].value;
console.log(person);
}
}
let p = person;
return `{a|${name}} {b|${p}个}`;
// `{a|${name}} 相当于图例data
// {b|${p}个 图例后面跟的位置
},
textStyle: {
fontSize: 20,
color: "#fff",
itemWidth: 20,
itemHeight: 20,
padding:[0,0,0,10],
//在rich中给formatter添加个别字体颜色,此处的abc对应formatter中的abc
rich: {
a: {
fontSize: 20,
verticalAlign: "top",
align: "right",
color: "#fff",
},
b: {
fontSize: 20,
verticalAlign: "top",
align: "right",
color: "#ccc",
},
},
},
orient: "vertical",
right: 800,
top: 20,
bottom: 20,
},
textStyle: {
fontSize: 20,
color: "#fff",
},
series: [
{
name: dataPieEcharts.areaName,
type: "pie",
radius: ["50%", "70%"],
center: ['45%', '50%'], //图的位置,距离左跟上的位置
data: [
{ value: dataPieEcharts.scenicPersonCount, name: "从业人员" },
{ value: dataPieEcharts.cameraCount, name: "摄像头" },
{ value: dataPieEcharts.scenicArchivescount, name: "处罚信息" },
{ value: dataPieEcharts.punishCount, name: "案事件" },
{ value: dataPieEcharts.personalizeCount, name: "个性化" },
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)",
},
},
},
],
};
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
}
this.$on("hook:destroyed", () => {
window.removeEventListener("resize", function () {
myChart.resize();
});
});
},
},
};
@import "../../assets/scss/index.scss";
.pieChart {
margin-top: 80px;
margin-left: -750px;
}
附:参考链接
https://www.lmlphp.com/user/9454/article/item/424746/