192 lines
5.9 KiB
JavaScript
192 lines
5.9 KiB
JavaScript
|
// components/safety-pie-chart/index.js
|
||
|
|
import * as echarts from '../../ec-canvas/echarts'
|
||
|
|
|
||
|
|
Component({
|
||
|
|
/**
|
||
|
|
* 组件的属性列表
|
||
|
|
*/
|
||
|
|
properties: {
|
||
|
|
chartId:{
|
||
|
|
type: String
|
||
|
|
},
|
||
|
|
chartData:{
|
||
|
|
type: Array
|
||
|
|
},
|
||
|
|
title:{
|
||
|
|
type: String
|
||
|
|
}
|
||
|
|
},
|
||
|
|
observers: {
|
||
|
|
chartData: function (val) {
|
||
|
|
this.initChart()
|
||
|
|
},
|
||
|
|
},
|
||
|
|
/**
|
||
|
|
* 组件的初始数据
|
||
|
|
*/
|
||
|
|
data: {
|
||
|
|
ec: {
|
||
|
|
lazyLoad: true
|
||
|
|
},
|
||
|
|
chart:undefined,
|
||
|
|
},
|
||
|
|
lifetimes: {
|
||
|
|
created: function(){
|
||
|
|
//在组件实例刚刚被创建时执行，注意此时不能调用 setData
|
||
|
|
},
|
||
|
|
attached: function () {
|
||
|
|
//在组件实例进入页面节点树时执行
|
||
|
|
|
||
|
|
},
|
||
|
|
ready: function () {
|
||
|
|
// 在组件在视图层布局完成后执行
|
||
|
|
|
||
|
|
this.initChart();
|
||
|
|
},
|
||
|
|
detached: function () {
|
||
|
|
// 在组件实例被从页面节点树移除时执行
|
||
|
|
},
|
||
|
|
|
||
|
|
},
|
||
|
|
/**
|
||
|
|
* 组件的方法列表
|
||
|
|
*/
|
||
|
|
methods: {
|
||
|
|
initChart(){
|
||
|
|
var id ='#' + this.data.chartId;
|
||
|
|
this.component = this.selectComponent(id);
|
||
|
|
if(this.component){
|
||
|
|
this.component.init((canvas, width, height, dpr) => {
|
||
|
|
let chart = echarts.init(canvas, null, {
|
||
|
|
width: width,
|
||
|
|
height: height,
|
||
|
|
devicePixelRatio: dpr
|
||
|
|
})
|
||
|
|
chart.setOption(this.getData());
|
||
|
|
return chart;
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
},
|
||
|
|
getData() {
|
||
|
|
var data = this.data.chartData
|
||
|
|
var legendData = []
|
||
|
|
var total = 0
|
||
|
|
for(var i=0;i<data.length;i++){
|
||
|
|
total += Number(data[i].value)
|
||
|
|
legendData.push(data[i].name)
|
||
|
|
}
|
||
|
|
var option = {
|
||
|
|
title: {
|
||
|
|
text: total.toFixed(1),
|
||
|
|
subtext: this.data.title,
|
||
|
|
textStyle: {
|
||
|
|
fontSize: 20,
|
||
|
|
color: "#0cd4f5",
|
||
|
|
lineHeight: 15,
|
||
|
|
},
|
||
|
|
subtextStyle: {
|
||
|
|
fontSize: 12,
|
||
|
|
color: "#d5dcf8",
|
||
|
|
},
|
||
|
|
textAlign: "center",
|
||
|
|
left: "21%",
|
||
|
|
top: "39%",
|
||
|
|
},
|
||
|
|
tooltip: {
|
||
|
|
trigger: "item",
|
||
|
|
},
|
||
|
|
// grid:{
|
||
|
|
// left:20
|
||
|
|
// },
|
||
|
|
legend: {
|
||
|
|
icon: "vertical",
|
||
|
|
// right: "0%",
|
||
|
|
left: '44%', // 靠左对齐
|
||
|
|
|
||
|
|
top: "center",
|
||
|
|
orient: "vertical",
|
||
|
|
// bottom: 40,
|
||
|
|
|
||
|
|
itemGap: 16,
|
||
|
|
itemWidth: 8,
|
||
|
|
itemHeight: 8,
|
||
|
|
data: legendData,
|
||
|
|
textStyle: {
|
||
|
|
|
||
|
|
color: "#c3dbfd",
|
||
|
|
rich: {
|
||
|
|
uname: {
|
||
|
|
width: 50,
|
||
|
|
lineHeight: 20,
|
||
|
|
fontSize: 9,
|
||
|
|
// padding: [10, 10, 10, 10],
|
||
|
|
},
|
||
|
|
unum: {
|
||
|
|
color: "#18DB9F",
|
||
|
|
// width: 24,
|
||
|
|
// align: "left",
|
||
|
|
fontSize: 8,
|
||
|
|
padding: [10, 0, 0, 5],
|
||
|
|
// lineHeight: 20
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
formatter(name) {
|
||
|
|
let res = data.filter((v) => v.name === name);
|
||
|
|
return "{uname| " + name + "}\n{unum|" + Number(res[0].value).toFixed(1) + "}{unum|" + res[0].prop + "%}"
|
||
|
|
//return `{uname|${name}}{unum|1132}`;
|
||
|
|
},
|
||
|
|
},
|
||
|
|
color: ['#4775ff','#55adf7','#6662da','#1f6086'],
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
name: "",
|
||
|
|
type: "pie",
|
||
|
|
radius: ['38%', '55%'],
|
||
|
|
center: ["22%", "50%"],
|
||
|
|
label: {
|
||
|
|
show: false,
|
||
|
|
},
|
||
|
|
labelLine: {
|
||
|
|
show: false,
|
||
|
|
},
|
||
|
|
itemStyle: {
|
||
|
|
borderWidth: 5,
|
||
|
|
borderColor: "#1e2336",
|
||
|
|
},
|
||
|
|
data: data
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: "外边框",
|
||
|
|
type: "pie",
|
||
|
|
clockWise: false, //顺时加载
|
||
|
|
hoverAnimation: false, //鼠标移入变大
|
||
|
|
center: ["22%", "50%"],
|
||
|
|
radius: ["63%", "63%"],
|
||
|
|
label: {
|
||
|
|
normal: {
|
||
|
|
show: false,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
data: [
|
||
|
|
{
|
||
|
|
value: 9,
|
||
|
|
name: "",
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
borderWidth: 3,
|
||
|
|
borderColor: "#152c65",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
],
|
||
|
|
};
|
||
|
|
|
||
|
|
return option;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|