echarts 环仪组合图

一、图例

二、记录点

三、完整代码

import React, { Component } from 'react';
import * as echarts from 'echarts';
import '../../stylus/charts/charts-com.less';
interface Props {}
type StateType = {}
class RingPie2 extends Component<Props, StateType> {
    constructor(props) {
        super(props);
        console.log('props', props);
    }
    componentWillMount() {
        // 渲染前
        console.log('Component WILL MOUNT!')
    }
    componentDidMount() {
        // 渲染后
        let color = ['rgb(36,92,193)',
        'rgb(87,166,191)', 
        'rgb(197,144,83)', 
        'rgb(158,91,103)', 
        'rgb(102,128,162)',
        ];
        let chartData = [
            {
                name: "公安分局",
                value: 60,
            },
            {
                name: "出入境管理",
                value: 50,
            },
            {
                name: "刑侦局",
                value: 40,
            },
            {
                name: "知识产权局",
                value: 30,
            },
            {
                name: "情报中心",
                value: 20,
            }
        ];
        let sum = 1;
        let pieSeries = [],
            lineYAxis = [],
            gaugeData = [];
        let richObject = {};

      // 设置富文本颜色
        for (let index = 0; index < color.length; index++) {
            richObject['bd'+index] = {};
            richObject['bd'+index]['color'] = color[index];
        }
        
        // 图表option整理
        chartData.forEach((v, i) => {
          // 设置仪表判的指针
            gaugeData.push({
                value: v.value,
                name: v.name,
                itemStyle: { color: color[i] },
                pointer: { length: (70 - i * 15)*2, width: 2 }
            });

            // 设置环比图数据展示比例
            pieSeries.push({
                name: '设备',
                type: 'pie',
                clockWise: false,
                hoverAnimation: false,
                radius: [70 - i * 15 + '%', 75 - i * 15 + '%'],
                center: ["30%", "50%"],
                label: {
                    show: false
                },
                itemStyle: {
                    borderWidth: 1,
                },
                data: [{
                    value: v.value,
                    name: v.name,
                    itemStyle: {
                        shadowColor: 'rgba(0, 0, 0, 0.5)',
                        shadowBlur: 10,
                    }
                }, {
                    value: sum*100 - v.value,
                    itemStyle: {
                        color: "transparent"
                    }
                }]
            });

          // 设置环比图底层的比例
            pieSeries.push({
                name: '',
                type: 'pie',
                silent: true,
                z: 1,
                clockWise: false, //顺时加载
                hoverAnimation: false, //鼠标移入变大
                radius: [70 - i * 15 + '%', 75 - i * 15 + '%'],
                center: ["30%", "50%"],
                label: {
                    show: false
                },
                data: [{
                    value: 7.5,
                    itemStyle: {
                        // color: "#E3F0FF"
                        color: 'rgba(0,0,0,0)'
                    }
                }, {
                    value: 2.5,
                    name: '',
                    itemStyle: {
                        color: "rgba(0,0,0,0)"
                    }
                }]
            });

            // 右上角文本
            lineYAxis.push({
                value: i,
                textStyle: {
                    rich: {
                        circle: {
                            color: color[i],
                            padding: [0, 5]
                        }
                    }
                }
            });
        });

        // 仪表盘绘制
        let gaugeline= {
            type: 'gauge',
            z:5,
            name: '外部刻度',
            title: { show: false},
            center: ['30%', '50%'],
            radius: '80%',
            min: 0, //最小刻度
            max: 80, //最大刻度
            splitNumber: 10, //刻度数量
            startAngle: 90, //270,
            endAngle: 360, //-45,
            axisLine: {
                show: true,
                lineStyle: {
                    width: 1,
                    color: [
                        [1, 'rgba(0,0,0,0)']
                    ]
                }
            }, //仪表盘轴线
            axisLabel: {
                show: true,
                color: '#4d5bd1',
                distance: 0,
            }, //刻度标签。
            axisTick: {
                show: true,
                splitNumber: 7,
                lineStyle: {
                    color: '#9F88FF', //用颜色渐变函数不起作用
                    width: 1,
                },
                length: -2
            }, //刻度样式
            splitLine: {
                show: false,
                length: -20,
                lineStyle: {
                    color: '#C7CBCF', //用颜色渐变函数不起作用
                }
            }, //分隔线样式
            detail: {
                show: false
            },
            anchor: {
                show: true,
                showAbove: true,
            },
            data: gaugeData
        };
        pieSeries.push(gaugeline);

        let option = {
            backgroundColor: 'rgba(0,0,0,0.2)',
            color: color,
            grid: {
                top: '10%',
                bottom: '54%',
                left: "30%",
                containLabel: false
            },
            yAxis: [{
                type: 'category',
                inverse: true,
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    formatter: function(params, index) {
                        let item = chartData[params];
                        console.log(item,index)
                        return '{bd'+index+'|'+ (item.value).toFixed(1)+'% '+item.name + '}';
                    },
                    interval: 0,
                    inside: true,
                    textStyle: {
                        color: "#fff",
                        fontSize: 14,
                        rich: richObject
                    },
                    show: true
                },
                data: lineYAxis
            }],
            xAxis: [{
                show: false
            }],
            series: pieSeries
        };
        
        let myChart = echarts.init(document.getElementById('canvasBox'));
        myChart.setOption(option);
        window.addEventListener("resize", myChart.resize);
    }
    render() {
        return (
            <div>
                <div className="ring-pie">
                    <h1>环仪组合图</h1>
                    <div className="chart-area">
                        <div id="canvasBox" className='canvasBox'></div>
                    </div>
                </div>
            </div>
        );
    }
}

export default RingPie2;