<template>
<div>
<div class="table-form">
<div class="search-select">
<div class="select-left-box">
<div class="up" @click="model_show = !model_show">
<span class="ml-2">近7天</span>
<span :class="model_show ? 'zheng' : 'fan'">
<i class="iconfont icon-xiala"></i>
</span>
</div>
<div class="down" :class="model_show ? 'show' : 'hide'">
<div class="option">
<el-checkbox-group
v-model="checkedModels"
@change="handleCheckedCitiesChange"
fill="#091F2A"
>
<el-checkbox
v-for="(item, index) in models"
:label="item"
:key="index"
class="item"
>{{ item }}
</el-checkbox>
</el-checkbox-group>
</div>
</div>
</div>
</div>
<div class="search-input select-search-input">
<div class="icon"><i class="iconfont data-sousuo"></i></div>
<input
type="text"
v-model="keyword"
placeholder="请输入搜索内容"
class="zt-center-search-input"
/>
<span class="zt-center-search-btn">搜索</span>
</div>
<div>
<div
class="download"
style="color: #23fffc; cursor: pointer"
@click="$router.back()"
>
返回
</div>
<div class="download">下载</div>
</div>
</div>
<div class="pieChart">
<div ref="chart" style="width: 100%; height: 400px"></div>
</div>
</div>
</template>
<script>
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();
});
});
},
},
};
</script>
<style lang='scss'>
@import "../../assets/scss/index.scss";
.pieChart {
margin-top: 80px;
margin-left: -750px;
}
</style>
附：参考链接
https://www.lmlphp.com/user/9454/article/item/424746/
