110 lines
2.6 KiB
Vue
110 lines
2.6 KiB
Vue
<template>
|
|
<div>
|
|
<div id="chart2" style="width:500px; height:260px;"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import * as echarts from "echarts";
|
|
import { ref, onMounted } from "vue";
|
|
function lineChartFn() {
|
|
var chartDom = document.getElementById("chart2");
|
|
var myChart = echarts.init(chartDom, "dark");
|
|
var option;
|
|
var scale = 1;
|
|
var echartData = [{
|
|
value: 2154,
|
|
name: '交通违法继续盘查'
|
|
}, {
|
|
value: 3854,
|
|
name: '其他原因继续盘查-正常'
|
|
}, {
|
|
value: 3515,
|
|
name: '其他原因继续盘查-有无违法行为'
|
|
}, {
|
|
value: 3515,
|
|
name: '其他原因继续盘查-巡逻盘查'
|
|
}, {
|
|
value: 3854,
|
|
name: '其他原因继续盘查-正常盘查'
|
|
}, {
|
|
value: 2154,
|
|
name: '其他原因继续盘查-正常检查'
|
|
},{
|
|
value: 2154,
|
|
name: '其他原因继续盘查-例行检查'
|
|
},{
|
|
value: 2154,
|
|
name: '其他原因继续盘查-放行'
|
|
},{
|
|
value: 2154,
|
|
name: '其他'
|
|
}]
|
|
var rich = {
|
|
yellow: {
|
|
color: "#ffc72b",
|
|
fontSize: 14 * scale,
|
|
padding: [5, 4],
|
|
align: 'center'
|
|
},
|
|
total: {
|
|
color: "#ffc72b",
|
|
fontSize: 14 * scale,
|
|
align: 'center'
|
|
},
|
|
white: {
|
|
color: "#fff",
|
|
align: 'center',
|
|
fontSize: 14 * scale,
|
|
padding: [0, 0]
|
|
},
|
|
blue: {
|
|
color: '#49dff0',
|
|
fontSize: 14 * scale,
|
|
align: 'center'
|
|
}
|
|
}
|
|
|
|
option = {
|
|
backgroundColor: 'rgba(0,0,0,0)',
|
|
legend: {
|
|
orient: 'vertical',
|
|
right: 0,
|
|
top: 5
|
|
},
|
|
series: [{
|
|
name: '今日警情处置分析图',
|
|
type: 'pie',
|
|
radius: ['10%', '50%'],
|
|
hoverAnimation: false,
|
|
color: ['#c487ee', '#deb140', '#49dff0', '#034079', '#6f81da', '#00ffb4'],
|
|
label: {
|
|
normal: {
|
|
formatter: function(params, ticket, callback) {
|
|
var total = 0; //考生总数量
|
|
var percent = 0; //考生占比
|
|
echartData.forEach(function(value, index, array) {
|
|
total += value.value;
|
|
});
|
|
percent = ((params.value / total) * 100).toFixed(1);
|
|
return '{white|' + params.name + '}\n{yellow|' + params.value + '}\n{blue|' + percent + '%}';
|
|
},
|
|
rich: rich
|
|
},
|
|
},
|
|
data: echartData
|
|
}]
|
|
};
|
|
|
|
option && myChart.setOption(option);
|
|
document.getElementById("chart2").setAttribute('_echarts_instance_', '')
|
|
}
|
|
onMounted(() => {
|
|
lineChartFn();
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
</style>
|