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;
|
||
}
|
||
}
|
||
})
|