jhprjv2/ruoyi-ui-app/miniprogram/newComponents/safety-bar-charts/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){
                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: "8%",
                    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,10],
                                        fontSize:'14',
                                    },
                                    color:{
                                        color: '#8ca2be',
                                        fontSize:'14',
                                    },
                                    // arrow:{
                                    //     width:20,
                                    //     height:15,
                                    //     backgroundColor: {
                                    //         image: "https://xiangguan.sxyanzhu.com/statics/static/img/WEB_2B7C06210CD44D55BFEE6205A35DE4A7.png",
                                    //     },
                                    // },

                                },
                                formatter: function(data) {
                                    //富文本固定格式{colorName|这里填你想要写的内容}
                                    //return '{arrow|}'
                                    // return '{arrow|}{name|' + text[data.dataIndex] + '}{prop|' + value[data.dataIndex] + '}{color| 人}   {prop|'+prop[data.dataIndex]+'}{color| %} ';
                                    return '{index|No.'+(nameData.length-data.dataIndex)+'}{name|' + nameData[data.dataIndex] + '}               {prop|} {yes|'+((Number(yesMonitor[data.dataIndex] / totalData[data.dataIndex]) * 100).toFixed(1))+'}{unit| '+unitData[data.dataIndex]+'}';
                                },
                            }
                        },
                        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;
        }
    }
})