Echarts 条形、柱状、饼图、环形、折线、面积、雷达多图循环根据类型显示

最新推荐文章于 2024-07-17 17:26:17 发布

王柃苏

最新推荐文章于 2024-07-17 17:26:17 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： Echarts 文章标签： echarts vue.js

本文链接：https://blog.youkuaiyun.com/weixin_53003063/article/details/126856391

本文介绍了一个使用Echarts在Vue.js环境中循环显示不同类型的图表的需求。内容涵盖了条形图（横向柱状图）、柱状图、饼图、环形图、折线图和雷达图的实现，并提供了相应的代码示例，适用于动态展示多类型数据的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如图所示

需求&背景：添加标签时可以选择不同的展示方式，点击进入某数据的画像页面，展示该画像下的所有标签数据，多个标签且类型是不固定的，所以就要循环echarts并根据不同的类型展示对应的echarts图标

需求&背景：添加标签时可以选择不同的展示方式，点击进入某数据的画像页面，展示该画像下的所有标签数据，多个标签且类型是不固定的，所以就要循环echarts并根据不同的类型展示对应的echarts图标

图表代码：

条形（横向柱状图）

// 条形，横向柱状
    Txt(myChart, nameList, valList) {
      myChart.setOption({
        grid: {
          left: "3%",
          right: "3%",
          bottom: "3%",
          top: "3%",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        xAxis: {
          type: "value",
        },
        yAxis: {
          type: "category",
          data: nameList,
        },
        series: [
          {
            data: valList,
            type: "bar",
          },
        ],
      });
    },

柱状图（普通竖向柱状）

// 柱状图——竖向柱状
    Zzt(myChart, nameList, valList) {
      myChart.setOption({
        grid: {
          left: "3%",
          right: "3%",
          bottom: "3%",
          t