YZProjectCloud/yanzhu-ui-app/miniprogram/components/safety-bar-chart/index.js

// 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()
        },
    },
    /**
     * 组件的初始数据
     */
    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.data

            var max = data[0].total
            var nameData = [];
            var totalData = []
            var background = []
            var yesMonitor = []
            var notMonitor = []
            var yesProp = []
            var notProp = []
            var unitData = []

            for (let i = data.length - 1; i >= 0; i--) {
                nameData.push(data[i].name);
                totalData.push(data[i].total)
                unitData.push(data[i].unit)
                background.push(100);
                yesMonitor.push(data[i].yesMonitor);
                notMonitor.push(data[i].notMonitor);
                yesProp.push((data[i].yesMonitor / max) * 100)
                notProp.push((data[i].notMonitor / max) * 100)
            }

            var legend = ["已监控", "未监控"]

            var option = {
                grid: {
                    //图表的位置
                    top: "0%",
                    left: "3%",
                    right: "5%",
                    bottom: "-12%",
                    containLabel: true,
                },
                legend: {
                    top: "0",
                    //icon: "circle",
                    itemWidth: 10,
                    itemHeight: 10,
                    itemGap: 8,
                    textStyle: {
                        fontSize: 12,
                        color: '#c6d9fa'
                    },
                    data: legend,
                },
                xAxis: [{
                        show: false,
                    },
                    //由于下边X轴已经是百分比刻度了,所以需要在顶部加一个X轴,刻度是金额,也隐藏掉
                    {
                        show: false,
                    }
                ],
                yAxis: [{
                    type: 'category',
                    axisLabel: {
                        show: false, //让Y轴数据不显示
                    },
                    itemStyle: {

                    },
                    axisTick: {
                        show: false, //隐藏Y轴刻度
                    },
                    axisLine: {
                        show: false, //隐藏Y轴线段
                    },
                    data: [],
                }, {
                    show: false,
                    data: [],
                    axisLine: {
                        show: false
                    }
                }],
                series: [
                    //数据条--------------------我是分割线君------------------------------//
                    {
                        show: true,
                        type: 'bar',
                        xAxisIndex: 1, //代表使用第二个X轴刻度!!!!!!!!!!!!!!!!!!!!!!!!
                        barGap: '-100%',
                        barWidth: '6', //统计条宽度
                        itemStyle: {
                            normal: {
                                color: 'rgba(22,203,115,0.05)'
                            },
                        },
                        label: {
                            normal: {
                                show: true,
                                //label 的position位置可以是top bottom left,right,也可以是固定值
                                //在这里需要上下统一对齐,所以用固定值
                                position: [0, '-20'],
                                rich: { //富文本
                                    prop: { //自定义颜色
                                        color: '#c6d9fa',
                                        fontSize: '14',
                                    },
                                    unit: {
                                        color: '#6c829a',
                                        fontSize: '12',
                                    },
                                    yes: {
                                        color: '#55adf7',
                                        fontSize: '14',
                                    },
                                    not: {
                                        color: '#4677fa',
                                        fontSize: '14',
                                    },
                                    index: {
                                        color: '#fcbc02',
                                        fontStyle: 'italic',
                                        padding: [0, 0, 0, 5],
                                        fontSize: '14',
                                    },
                                    name: {
                                        width: 120,
                                        color: '#c6d9fa',
                                        padding: [0, 0, 0, 5],
                                        fontSize: '14',
                                    },
                                    color: {
                                        color: '#8ca2be',
                                        fontSize: '14',
                                    },


                                },
                                formatter: function (data) {
                                    //富文本固定格式{colorName|这里填你想要写的内容}
                                    //return '{arrow|}'
                                    return '{index|No.' + (nameData.length - data.dataIndex) + '}{name|' + nameData[data.dataIndex] + '}{prop|' + totalData[data.dataIndex] + '}{unit| ' + unitData[data.dataIndex] + '}{prop|（} {yes|' + yesMonitor[data.dataIndex] + '}{unit| ' + unitData[data.dataIndex] + '/}{not|' + notMonitor[data.dataIndex] + '}{unit| ' + unitData[data.dataIndex] + '}{prop|）} ';
                                },
                            }
                        },
                        data: background
                    },
                    {
                        type: 'bar',

                        silent: true,
                        yAxisIndex: 1,
                        barWidth: 6,
                        itemStyle: {
                            normal: {
                                color: 'rgba(0,82,198,0.3)'
                            },
                            emphasis: {
                                color: 'rgba(0,82,198,0.3)'
                            }
                        },
                        data: background
                    },
                    {
                        type: 'bar',
                        //name:legend[0],
                        stack: '1',
                        legendHoverLink: false,
                        barWidth: 6,
                        itemStyle: {
                            normal: {
                                color: '#52adf4'
                            },
                            emphasis: {
                                color: '#52adf4'
                            }
                        },
                        data: yesProp
                    }, {
                        type: 'bar',
                        //name:legend[1],
                        stack: '1',
                        legendHoverLink: false,
                        barWidth: 6,
                        itemStyle: {
                            normal: {
                                color: '#4677ff'
                            },
                            emphasis: {
                                color: '#4677ff'
                            }
                        },
                        data: notProp
                    }
                ]
            };

            return option;
        }
    }
})