You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
96 lines
2.6 KiB
96 lines
2.6 KiB
2 years ago
|
import * as echarts from '../../../../ec-canvas/echarts';
|
||
|
|
function initChart(canvas, width, height, dpr) {
|
||
|
|
const chart = echarts.init(canvas, null, {
|
||
|
|
width: width,
|
||
|
|
height: height,
|
||
|
|
devicePixelRatio: dpr // 像素比
|
||
|
|
});
|
||
|
|
canvas.setChart(chart);
|
||
|
|
|
||
|
|
let data = [
|
||
|
|
{value: 120, name: '市容环境'},
|
||
|
|
{value: 150, name: '停车管理'},
|
||
|
|
{value: 210, name: '物业服务'},
|
||
|
|
{value: 177, name: '城市低保'},
|
||
|
|
{value: 194, name: '违章建房'},
|
||
|
|
];
|
||
|
|
let color = ["#4F94FF","#A182FB","#27D1A7","#FCBF06","#FF7108"]
|
||
|
|
var option = {
|
||
|
|
color,
|
||
|
|
tooltip: {
|
||
|
|
show: true,
|
||
|
|
textStyle: {
|
||
|
|
color: '#fff',
|
||
|
|
fontSize: 14
|
||
|
|
},
|
||
|
|
backgroundColor: "#04229a",
|
||
|
|
// extraCssText: "box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.3);",
|
||
|
|
formatter(params) {
|
||
|
|
// console.log(params)
|
||
|
|
if (params.name === '') {
|
||
|
|
return '';
|
||
|
|
}
|
||
|
|
return `${params.name} : ${params.percent}%`;
|
||
|
|
},
|
||
|
|
},
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
name: '',
|
||
|
|
type: 'pie',
|
||
|
|
radius: ['40%', '70%'],
|
||
|
|
center: ['50%', '50%'], // 修改为居中
|
||
|
|
avoidLabelOverlap: true,
|
||
|
|
label: {
|
||
|
|
color: '#333333',
|
||
|
|
alignTo: 'labelLine',
|
||
|
|
formatter: '{num|{c}}\n{name|{b}}',
|
||
|
|
minMargin: 5,
|
||
|
|
edgeDistance: 10,
|
||
|
|
lineHeight: 15,
|
||
|
|
rich: {
|
||
|
|
num: {
|
||
|
|
fontSize: 17,
|
||
|
|
color: '#333333'
|
||
|
|
},
|
||
|
|
zb: {
|
||
|
|
fontSize: 14,
|
||
|
|
color: '#333333'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
labelLine: {
|
||
|
|
length: 15,
|
||
|
|
length2: 0,
|
||
|
|
maxSurfaceAngle: 80
|
||
|
|
},
|
||
|
|
data: data
|
||
|
|
}
|
||
|
|
]
|
||
|
|
};
|
||
|
|
chart.setOption(option);
|
||
|
|
return chart;
|
||
|
|
}
|
||
|
|
Component({
|
||
|
|
properties: {},
|
||
|
|
data: {
|
||
|
|
ec: {
|
||
|
|
onInit: initChart
|
||
|
|
},
|
||
|
|
tabList: [{
|
||
|
|
label: "问题突出类别",
|
||
|
|
value: 1
|
||
|
|
},{
|
||
|
|
label: '行业领域分析',
|
||
|
|
value: 2
|
||
|
|
}],
|
||
|
|
tabValue: ''
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
tabChange(index) {
|
||
|
|
this.setData({
|
||
|
|
tabValue: this.tabList[index].value
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|