Echarts 问题解决 —— div+css 自定义图例 关联 echarts图表

目录

场景再现

问题解决

示例演示

---

场景再现

• 设计稿如下图：
• 
• 几个难点：

1. 图例：经过官网查询，不能给每个图例单独设置如图所示的底边，只能定义图例整体最外层的边框
2. 外面的圆环
3. 环状之间的间隙

问题解决

• 上述图例并非通过 echarts图表 进行设置，而是编写了 html、css 进行了设置，并将其关联 echarts图表
• 外面的圆环，是给 echarts图表容器，添加背景实现
• 环状之间的间隙，是通过设置每个扇形之间的边框宽度及颜色，将之设置为背景色，模拟间隙

示例演示

• html/css 部分：

<!-- 环状饼图 -->
<div id="chuli-tongji" class="echarts-bg" style="widows: 300px;height: 250px"></div>
<!-- 模拟图例 -->
        <div class="legend-outer">
            <div class="legend-box">
                <span class="circle"></span>
                <span class="legend-text">工业污染源</span>
                <span class="legend-num">23.5</span>
                <span class="legend-text">%</span>
            </div>
            <div class="legend-box">
                <span class="circle"></span>
                <span class="legend-text">污水处理厂</span>
                <span class="legend-num">23.5</span>
                <span class="legend-text">%</span>
            </div>
            ...
        </div>

• js 部分：

       // 存储刚刚实例化的图表
        var chartOneDom = drawPieOne();
        // 调用点击图标高亮的方法
        highlightEchart('.legend-box', chartOneDom, 0);

        /*
         * 点击图例高亮图标
         * @parms <object> tar：被点击的图例 dom对象
         * @parms <object> tarChart：echarts实例化的 dom对象
         */
        // @parms <Array> pieStatus：存在多个饼图的状态下，记录饼图高亮状态下的下标值 
        // 第一个元素是饼图一高亮状态下的下标值，第二个元素是饼图二高亮状态下的下标值
        var pieStatus = [0, 0]

        function highlightEchart(tar, tarChart, pieIndex) {
            // 图例点击后触发的事件
            $(tar).click(function() {
                // 存储点击的数据块的下标
                pieStatus[pieIndex] = $(this).index()
                    // 非选中项数组
                var serLength = [];
                // 对选中项数组初始化
                for (let i = 0; i < $(tar).length; i++) {
                    serLength.push(i);
                }
                // 获得除了选中项的下标数组
                serLength.splice(serLength.indexOf($(this).index()), 1);
                // 选中项高亮
                tarChart.dispatchAction({
                    type: 'highlight',
                    dataIndex: pieStatus[pieIndex]
                });
                // 非选中项取消高亮s
                tarChart.dispatchAction({
                    type: 'downplay',
                    dataIndex: serLength
                });
            })
        }

        /*
         * 绘制环状图表
         * @return 返回 echarts实例化的 dom对象
         */
        function drawPieOne() {
            // 1. 实例化对象
            var chuLiTongJi = echarts.init(document.querySelector("#chuli-tongji"));
            // 2. 指定配置项和数据
            var option = {
                ...
                series: [{
                    ...
                    // 设置边框，实现饼图扇形之间的间隔效果
                    itemStyle: {
                        normal: {
                            borderWidth: 5,
                            borderColor: '#333',
                        }
                    },
                }, ],
            };
            // 3. 把配置项给实例对象
            chuLiTongJi.setOption(option);

            // 4. 设置默认高亮
            chuLiTongJi.dispatchAction({
                type: 'highlight',
                dataIndex: 0
            });
            chuLiTongJi.on('mouseover', function(e) {
                // 当检测到鼠标悬停事件，取消默认选中高亮
                chuLiTongJi.dispatchAction({
                    type: 'downplay',
                    dataIndex: pieStatus[0]
                });
                pieStatus[0] = e.dataIndex;
                // 高亮显示悬停的那块
                chuLiTongJi.dispatchAction({
                    type: 'highlight',
                    dataIndex: e.dataIndex
                });
            });

            // 5. 让图表跟随屏幕自动的去适应
            window.addEventListener("resize", function() {
                chuLiTongJi.resize();
            });

            // 6. 最终返回实例化的对象
            return chuLiTongJi;
        }