231 lines
7.0 KiB
JavaScript
231 lines
7.0 KiB
JavaScript
|
// components/safety-pie-chart/index.js
|
|||
|
|
import * as echarts from '../../ec-canvas/echarts'
|
|||
|
|
|
|||
|
|
Component({
|
|||
|
|
/**
|
|||
|
|
* 组件的属性列表
|
|||
|
|
*/
|
|||
|
|
properties: {
|
|||
|
|
chartId:{
|
|||
|
|
type: String
|
|||
|
|
},
|
|||
|
|
data:{
|
|||
|
|
type: Array
|
|||
|
|
},
|
|||
|
|
height:{
|
|||
|
|
type: Number
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
observers: {
|
|||
|
|
data: function (val) {
|
|||
|
|
this.initChart()
|
|||
|
|
this.setData({
|
|||
|
|
chartData:val
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 组件的初始数据
|
|||
|
|
*/
|
|||
|
|
data: {
|
|||
|
|
ec: {
|
|||
|
|
lazyLoad: true
|
|||
|
|
},
|
|||
|
|
chart:undefined,
|
|||
|
|
chartData:[]
|
|||
|
|
},
|
|||
|
|
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
|
|||
|
|
console.log(data)
|
|||
|
|
var yData_1 = []
|
|||
|
|
var yData_2 = []
|
|||
|
|
var xData = []
|
|||
|
|
var legend = ['设计量','应耗量']
|
|||
|
|
var unit = '单位：m³'
|
|||
|
|
|
|||
|
|
data.forEach(item =>{
|
|||
|
|
yData_1.push(item.sjQuantity)
|
|||
|
|
yData_2.push(item.yesMonitor)
|
|||
|
|
xData.push(item.name)
|
|||
|
|
})
|
|||
|
|
var option = {
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: "axis",
|
|||
|
|
axisPointer: {
|
|||
|
|
type: "shadow",
|
|||
|
|
label: {
|
|||
|
|
show: true,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
grid:{
|
|||
|
|
left: "15%",
|
|||
|
|
top: "25%",
|
|||
|
|
right: "5%",
|
|||
|
|
bottom: "12%",
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
data: legend,
|
|||
|
|
right: 10,
|
|||
|
|
top: 12,
|
|||
|
|
textStyle: {
|
|||
|
|
color: "#fff",
|
|||
|
|
},
|
|||
|
|
itemWidth: 12,
|
|||
|
|
itemHeight: 10,
|
|||
|
|
// itemGap: 35
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
data: xData,
|
|||
|
|
axisLine: {
|
|||
|
|
show: true, //隐藏X轴轴线
|
|||
|
|
lineStyle: {
|
|||
|
|
color: "#2f4472",
|
|||
|
|
width: 1,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
axisTick: {
|
|||
|
|
show: true, //隐藏X轴刻度
|
|||
|
|
alignWithLabel: true,
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
show: true,
|
|||
|
|
textStyle: {
|
|||
|
|
color: "#cbdaff", //X轴文字颜色
|
|||
|
|
fontSize: 12,
|
|||
|
|
},
|
|||
|
|
interval: 0,
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
name:unit,
|
|||
|
|
nameTextStyle: { //Y轴那么的样式
|
|||
|
|
color: '#42d0ff',
|
|||
|
|
fontSize: 12,
|
|||
|
|
},
|
|||
|
|
type: "value",
|
|||
|
|
axisLabel: {
|
|||
|
|
textStyle: {
|
|||
|
|
color: "#cbdaff",
|
|||
|
|
},
|
|||
|
|
formatter: "{value}",
|
|||
|
|
},
|
|||
|
|
splitLine: {
|
|||
|
|
lineStyle: {
|
|||
|
|
type: "dashed",
|
|||
|
|
color: "#2f4472",
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
axisLine: {
|
|||
|
|
show: true,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: "#2f4472",
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: legend[0],
|
|||
|
|
type: "bar",
|
|||
|
|
barWidth: 8,
|
|||
|
|
barGap: 2,
|
|||
|
|
label: {
|
|||
|
|
normal: {
|
|||
|
|
show: true,
|
|||
|
|
position: "top",
|
|||
|
|
color:"#fff"
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|||
|
|
{
|
|||
|
|
offset: 0,
|
|||
|
|
color: "rgba(64,124,254,1)",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
offset: 1,
|
|||
|
|
color: "rgba(64,124,254,0.2)",
|
|||
|
|
},
|
|||
|
|
]),
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
data: yData_1,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: legend[1],
|
|||
|
|
type: "bar",
|
|||
|
|
barWidth: 8,
|
|||
|
|
barGap: 2,
|
|||
|
|
label: {
|
|||
|
|
normal: {
|
|||
|
|
show: true,
|
|||
|
|
position: "inside",
|
|||
|
|
color:"#fff"
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|||
|
|
{
|
|||
|
|
offset: 0,
|
|||
|
|
color: "rgba(25,210,204,1)",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
offset: 1,
|
|||
|
|
color: "rgba(25,210,204,0.2)",
|
|||
|
|
},
|
|||
|
|
]),
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
data: yData_2,
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
],
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return option;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|