Echars怎么自定义数据视图

Atigger

2023 年 10 月 30 日

183 次浏览

关闭评论

4505字数

前端

点击切换视图图标，可以切换到另一个视图

这个是默认切换后的

比较丑，我们可以通过optionToContent这个属性来进行自定义样式

代码如下

<body>
    <div class="box" style="width: 700px;height: 700px; border: 1px solid #000;"></div>
    <script>
        let myChart = echarts.init(document.querySelector('.box'))
        let option = {
            title: {
                text: '籍贯 Hometown'
            },
            // 提示框
            tooltip: {
                // 触发条件，item是只有自身才会触发
                trigger: 'item'
            },
            // 提示键(一般都会在上方)工具栏
            // 内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。
            toolbox: {
                // 各工具配置项
                feature: {
                    // 数据视图(点击可以转换)
                    dataView: {
                        show: true,
                        readOnly: false,
                        title: '切换视图',
                        // 修改视图切换后的图的关键词
                        lang: ['数据视图', '关闭', '刷新'],
                        // 修改切换后的视图样式等
                        optionToContent: function (opt) {
                            // 默认就有一个参数，可以打印看一下
                            // console.log(opt.series[0].data)
                            let series = opt.series[0].data // 需要的数据源
                            // 表头
                            let thead = `
                                <tr>
                                    <th style = "padding: 0 10px">地区</th>
                                    <th style = "padding: 0 10px">数量</th>
                                </tr> 
                            `
                            // 表身
                            let tbody = ''
                            series.forEach(function (item) {
                                tbody += `
                                    <tr>
                                        <td style="padding: 0 10px">
                                            ${item.name}
                                        </td>
                                        <td style="padding: 0 10px">
                                            ${item.value}
                                        </td>
                                    </tr>
                                `
                            });
                            // 表格
                            let table = `
                            <table border="1" style="margin-left:20px;border-collapse:collapse;font-size:14px;text-align:center">
                                ${thead}${tbody}
                            `
                            return table;
                        }
                    },
                    // 配置项还原
                    restore: {
                        show: true,
                        title: '还原'
                    },
                    // 导出图片
                    saveAsImage: {
                        show: true,
                        title: '保存为图片'
                    }
                }
            },
            series: [
                {
                    // 指定什么类型的图
                    type: 'pie',
                    // 内半径和外半径
                    radius: [50, 250],
                    // 是否展示成南丁格尔图
                    roseType: 'area',
                    // 饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标
                    // 可以是具体数值，也可以是百分比
                    center: ['50%', '50%'],
                    // 图形样式
                    itemStyle: {
                        // 指定图形的圆角边框(不管什么图形)
                        borderRadius: 8
                    },
                    // 数据源
                    data: [
                        { value: 40, name: '广西壮族自治区' },
                        { value: 38, name: '内蒙古自治区' },
                        { value: 32, name: '黑龙江省' },
                        { value: 30, name: '湖南省' },
                        { value: 28, name: '甘肃省' },
                        { value: 26, name: '山东省' },
                        { value: 22, name: '云南省' },
                        { value: 18, name: '西藏自治区' },
                        { value: 18, name: '河北省' },
                        { value: 18, name: '江苏省' },
                        { value: 18, name: '河南省' },
                        { value: 18, name: '新疆维吾尔自治区' },
                    ]
                }
            ]
        }
        myChart.setOption(option)
    </script>
</body>

效果如下