echarts 旭日图 自定义图例的实现 |
您所在的位置：网站首页 › 水库的图例怎么画出来 › echarts 旭日图 自定义图例的实现 |
echarts 旭日图 自定义图例的实现
|
echarts官网中的旭日图示例中，我们发现没有做好的图例，所以我们可以自定义图例 实现的效果如下： 具体实现效果是通过visualMap来实现的，废话不多说，直接上代码： setPersistentChart = function() { const data=[ { "name": "内审未发现", "values": "1", "draftNumbers": 4 }, { "name": "内审已发现", "values": "0.9", "draftNumbers": 5, "children": [ { "name": "内审已发现但未督促整改", "values": "0.90", "draftNumbers": 2 }, { "name": "内审已督促整改", "values": "0.8", "draftNumbers": 1, "children": [ { "name": "内审已持续跟踪", "values": "0.7", "draftNumbers": 1 }, { "name": "内审已督促整改但未持续跟踪", "values": "0.80", "draftNumbers": 0 } ] } ] } ] // 获取 chart 元素 const chartDom = self.$refs.persistentChart; // 初始化 echarts const myChart = echarts.init(chartDom); const colors =['rgb(34,177,76)','rgb(255,242,0)','rgb(112,146,190)','rgb(255,127,39)','rgb(0,162,232)','rgb(221,45,75)']; let colorIndex = 0; const convertData = function(data) { return data.map(item => ({ name: item.name, value: item.draftNumbers, children: item.children ? convertData(item.children) : null, values: item.values, itemStyle: { color: colors[colorIndex++%colors.length] // 你可以在这里设置颜色，可以是数组或函数等 } })); }; const convertedData = convertData(detail); const getAllNodeInfo = function(data) { let nodes = []; // 遍历当前节点的信息，并添加到数组中，如果你的图例需要排除图上不存在的，则可以添加一个判断条件 让循环里面item.value >0 就可以了 data.forEach(item => { nodes.push({ name: item.name, color: item.itemStyle.color, // 获取颜色信息 }); // 如果当前节点有孩子节点，则递归调用该函数 if (item.children) { nodes = nodes.concat(getAllNodeInfo(item.children)); } }); return nodes; }; const categoryArray = getAllNodeInfo(convertedData); const categoryMap = {}; categoryArray.forEach(item => { categoryMap[item.name] = item.color; }); const option = { title: { text: '旭日图', left: 'center', textStyle: { color: '#1a1b4e', fontStyle: 'normal', fontSize: 24 }, }, visualMap: { left: 'right', top: 'center', dimension: 2, seriesIndex: 2, padding: 5, textGap: 4, selectedMode: false,//禁止了点击，因为现在的图列与图是无法联动的 color: Object.values(categoryMap).reverse(), categories: Object.keys(categoryMap),// 设置图例的名称 }, series: [{ type: 'sunburst', roam: false, nodeClick: true,//禁用了数据下钻的效果，如果需要数据下钻请删除roam和nodeClick itemStyle: { normal: { label: { show: true, formatter: "{b}" }, }, }, label: { normal: { show: true, formatter: function(params) { return params.value + '条(' + (params.value / detail.reduce((acc, cur) => acc + cur.draftNumbers, 0) * 100).toFixed(2) +'%)'; }, fontSize: 8, position: 'insideRight', // 调整为 inside 或 insideRight } }, data: convertedData, radius: [0, '75%'], sort: null, }] }; myChart.setOption(option); };主要的问题就在于如何图例如何与图的颜色，名称相对应：我这里定义了一个颜色数组，然后给每一个类型都赋值不同的颜色，后面通过getAllNodeInfo()方法去获取了所有节点的一个名称和颜色；最后通过color和categories将名称和颜色一一对应起来，为什么要用到reverse()是因为拿到的图例颜色数组，由于和name属性是反着的，所以一定要将数组reverse一下。这样就可以实现我们上面的效果啦！ |
【本文地址】
今日新闻 |
推荐新闻 |