echarts 柱状图、雷达图、饼图的一些基础

最新推荐文章于 2025-02-23 11:54:36 发布

原创最新推荐文章于 2025-02-23 11:54:36 发布 · 629 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #vue.js

本文详细介绍了如何在ECharts中创建柱状图、雷达图和饼图，包括各自的效果图展示，以及关键代码片段。柱状图展示了颜色自定义和渐变色应用，雷达图则关注了指示器配置和样式设置，饼图通过点击事件演示参数获取。

文章目录

柱状图
雷达图
饼图

柱状图

效果图
在这里插入图片描述

代码如下：

series: {
    type: 'bar',
    barWidth: 15,
    data: yData,
    itemStyle: {
    	normal: {
            //这是重点；colors自己定义的颜色数组
       		color(params) {
          		var colorList = colors;
          		return colorList[params.dataIndex]
       		}
    	}
 	}
// 这是渐变色的
itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [{
                            offset: 0,
                            color: "#38B2E6"
                        },
                        {
                            offset: 1,
                            color: "#ddd"
                        }
                    ]),
                    opacity: .8
                },
            },
}

雷达图

效果图
在这里插入图片描述

代码如下：

radar: {
          radius: '60%',			// 这是图的大小
          center: ['50%', '45%'],	// 这是图的位置
          indicator: [				// 这是雷达图的指示器，用来指定雷达图中的多个变量
            {name: '一', max: 50},
            {name: '二', max: 50},
            {name: '三', max: 50},
            {name: '四', max: 50},
            {name: '五', max: 50},
            {name: '六', max: 50}
          ],
          shape: 'circle',		// 这是环的样式，可以是圆，可以是菱形
          splitNumber: 5,		// 这是环数，白色的圈
          name: {
            textStyle: {
              color: '#0EE3AB'
            }
          },
          nameGap: 7,
          splitLine: {
            lineStyle: {
              color: '#ffffffaa'
            }
          },
          splitArea: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: 'red'
            }
          }
        },
        series: {
          type: 'radar',
          data: yData,
          areaStyle: {
            opacity: 0.3 
          },
          lineStyle: {
            width: 0.5
          },
          symbol: 'rect', 
        }

饼图

点击之后返回的参数：
在这里插入图片描述

代码如下：


//点击动作
 myChart.setOption(option);
   myChart.on("click", eConsole);
   myChart.on("hover", eConsole);

function eConsole(param) {
      let self = this
      console.log(param)  
      // 点击返回的参数（具体在上面）
      if (typeof param.seriesIndex != 'undefined') {
        if (param.type == 'click' && Object.keys(param.data).length > 0) {
          dialog.visible = true
        }
      }
    },