echarts 词云样式配置、堆叠图层级不清晰、饼状图每块的边框间隙

最新推荐文章于 2024-06-17 17:18:14 发布

东湖高新第一会所掌门人

最新推荐文章于 2024-06-17 17:18:14 发布

阅读量521

点赞数

文章标签： echarts javascript ecmascript

本文链接：https://blog.csdn.net/qq_42359718/article/details/130745916

版权

词云字体样式未生效原因：

版本号 ：
  "echarts": "^5.4.2",
  "echarts-for-react": "^3.0.2",
  "echarts-wordcloud": "^2.1.0",

错误原因：`这里添加了 normal 这一层级`

在这里插入图片描述

字体样式未生效
处理：去掉normal 这个层级

   textStyle: {
                  normal: {
                            fontWeight: 'bold',
                            // 回调函数 或 颜色值
                            color: function () {
                                // 默认 随机颜色
                                return (
                                    'rgb(' +
                                    [
                                    Math.round(Math.random() * 160),
                                     Math.round(Math.random() * 160),
                                      Math.round(Math.random() * 160)].join(',') +
                                    ')'
                                );
                            },
                        },
                        // 鼠标hover的特效样式
                        emphasis: {
                            shadowBlur: 10,
                            shadowColor: '#333',
                        },
                    },

处理后：
在这里插入图片描述

堆叠图层级不清晰

添加 stack: i, // 添加这个属性
在这里插入图片描述

  {
  	...
  	series: [0, 1].map((i) => {
                return {
                    name: echartsConfig.key[i],
                    type: 'line',
                    stack: i, // 添加这个参数  
                    smooth: true,
                    data: [120, 132, 101, 134, 90, 230, 210].map((i) => Math.floor(Math.random() * 10 * i)),
                    yAxisIndex: i, // 对应左侧Y轴
                    areaStyle: {
                        opacity: 0.8,
                        color: colorList[i],
                    },
                    itemStyle: {
                        color: themeColor[i], // 系列3的颜色
                    },
                };
            }),
  }

饼状图每块的边框间隙

添加前：
在这里插入图片描述

 itemStyle: {
                    // borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 1,
           },

添加后

在这里插入图片描述

  series: [
                {
                    type: 'pie',
                    clockwise: true, // 顺时针
                    itemStyle: {
                        // borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 1,
                    },
                    data: dataSource.map((i, ix) => ({
                        ...i,
                        itemStyle: { color: len > 3 ? colorList[ix] : colorList[2 * ix] },
                    })),
                    labelLine: {
                        show: false,
                    },
                    label: {
                        show: false,
                        position: 'center',
                    },
                    // emphasis: {
                    //     itemStyle: {
                    //         shadowBlur: 10,
                    //         shadowOffsetX: 0,
                    //         shadowColor: 'rgba(0, 0, 0, 0.5)',
                    //     },
                    // },
                },
            ],