180 lines
5.5 KiB
JavaScript
180 lines
5.5 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) {
|
|
console.log(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!=null){
|
|
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,
|
|
subtext: this.data.title,
|
|
textStyle: {
|
|
fontSize: 20,
|
|
color: "#0cd4f5",
|
|
lineHeight: 15,
|
|
},
|
|
subtextStyle: {
|
|
fontSize: 12,
|
|
color: "#d5dcf8",
|
|
},
|
|
textAlign: "center",
|
|
left: "18%",
|
|
top: "39%",
|
|
},
|
|
tooltip: {
|
|
trigger: "item",
|
|
},
|
|
legend: {
|
|
icon: "vertical",
|
|
right: "0%",
|
|
top: "center",
|
|
orient: "vertical",
|
|
itemGap: 20,
|
|
itemWidth: 10,
|
|
itemHeight: 10,
|
|
|
|
data: legendData,
|
|
textStyle: {
|
|
fontSize: 12,
|
|
color: "#c3dbfd",
|
|
rich: {
|
|
uname: {
|
|
width: 75,
|
|
},
|
|
unum: {
|
|
color: "#18DB9F",
|
|
width: 40,
|
|
align: "center",
|
|
},
|
|
},
|
|
},
|
|
formatter(name) {
|
|
let res = data.filter((v) => v.name === name);
|
|
return "{uname| " + name + "}{unum|" + res[0].value + "}{unum|" + res[0].prop + "%}"
|
|
//return `{uname|${name}}{unum|1132}`;
|
|
},
|
|
},
|
|
color: ['#4775ff','#55adf7','#6662da','#1f6086'],
|
|
series: [
|
|
{
|
|
name: "",
|
|
type: "pie",
|
|
radius: ['38%', '55%'],
|
|
center: ["20%", "50%"],
|
|
label: {
|
|
show: false,
|
|
},
|
|
labelLine: {
|
|
show: false,
|
|
},
|
|
itemStyle: {
|
|
borderWidth: 5,
|
|
borderColor: "#1e2336",
|
|
},
|
|
data: data
|
|
},
|
|
{
|
|
name: "外边框",
|
|
type: "pie",
|
|
clockWise: false, //顺时加载
|
|
hoverAnimation: false, //鼠标移入变大
|
|
center: ["20%", "50%"],
|
|
radius: ["63%", "63%"],
|
|
label: {
|
|
normal: {
|
|
show: false,
|
|
},
|
|
},
|
|
data: [
|
|
{
|
|
value: 9,
|
|
name: "",
|
|
itemStyle: {
|
|
normal: {
|
|
borderWidth: 3,
|
|
borderColor: "#152c65",
|
|
},
|
|
},
|
|
},
|
|
],
|
|
},
|
|
],
|
|
};
|
|
|
|
return option;
|
|
}
|
|
}
|
|
})
|