目录
场景再现
- 设计稿如下图:
- 几个难点:
- 图例:经过官网查询,不能给每个图例单独设置如图所示的底边,只能定义图例整体最外层的边框
- 外面的圆环
- 环状之间的间隙
问题解决
- 上述图例并非通过 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; }
Echarts 问题解决 —— div+css 自定义图例 关联 echarts图表
最新推荐文章于 2024-07-31 11:20:46 发布