菜单 搜索
首页 前端知识 vue Echarts合集（饼图，柱状图，线图，双柱状图，堆叠柱状图）

vue Echarts合集（饼图，柱状图，线图，双柱状图，堆叠柱状图）

2025-03-15 13:03:42 前端知识 前端哥 945 142 我要收藏

 

echarts.init(this.$refs.AverageEcharts);

echarts.init方法中中设置你自己定义的ref（注意！！！）

getAverageEcharts() {
      // 基于准备好的dom，初始化echarts实例
      const myChart = echarts.init(this.$refs.AverageEcharts);
      const option = {
        // tooltip: {
        //   trigger: "axis",
        //   axisPointer: {
        //     // 坐标轴指示器，坐标轴触发有效
        //     type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
        //   },
        // },
 
        legend: {
          show: true,
          textStyle: {
            fontSize: 10, //字体大小
            color: "rgba(135,206,234)", //字体颜色
          },
          orient: "horizontal",
          top: "20",
          x: "40%",
          y: "center",
          itemWidth: 10,
          itemHeight: 3,
        },
        xAxis: [
          {
            name: "试题",
            tyoe: "category",
            axisTick: {
              // 轴刻度
              show: false,
            },
            axisLabel: {
              // 轴文字
              color: "rgb(51,188,254)",
              fontSize: 20,
            },
            axisLine: {
              // 轴线
              show: false,
            },
            data: ["物理试题一", "物理试题二", "物理试题三", "物理试题四"],
            axisLabel: {
              show: true,
              textStyle: {
                color: "rgb(51,188,254)",
              },
            },
 
            nameTextStyle: {
              color: "rgb(51,188,254)",
            },
          },
        ],
        yAxis: {
          name: "分数",
          nameTextStyle: {
            color: "rgb(51,188,254)",
          },
          type: "value",
          splitLine: {
            // 设置坐标轴在 grid 区域中的分隔线。
            show: true, // 是否显示分隔线。默认数值轴显示，类目轴不显示。
            lineStyle: {
              // 设置分割线式样
              // color: ['#aaa', '#ddd']   分隔线颜色，可以设置成单个颜色  Array || string
              type: "solid", // 线的类型。 string: 'solid' 'dashed' 'dotted' || number || Array
              opacity: 1, // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
              color: "rgb(31,87,145)",
            },
          },
          // data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff",
            },
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgb(31,87,145)",
            },
          },
        },
        series: [
          {
            barWidth: "20%",
            name: "物理试题一",
            data: [
              {
                value: 7.85,
                itemStyle: {
                  color: "rgb(49,224,254)",
                },
              },
              null,
              null,
              null,
            ],
            stack: "Mon",
            // backgroundStyle: {
            //   color: "rgba(180, 180, 180, 0.2)",
            // },
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示数值
                  position: "top", //数值在上方显示
                  textStyle: {
                    //数值样式
                    color: "rgb(147,224,249)", //字体颜色
                    fontSize: 14, //字体大小
                  },
                },
              },
            },
            type: "bar",
          },
          {
            barWidth: "20%",
            name: "物理试题二",
            data: [
              null,
              {
                value: 6.45,
                itemStyle: {
                  color: "rgb(74,254,176)",
                },
              },
              null,
              null,
            ],
            type: "bar",
            stack: "Mon",
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示数值
                  position: "top", //数值在上方显示
                  textStyle: {
                    //数值样式
                    color: "rgb(147,224,249)", //字体颜色
                    fontSize: 14, //字体大小
                  },
                },
              },
            },
          },
          {
            barWidth: "20%",
            name: "物理试题三",
            data: [
              null,
              null,
              {
                value: 5.95,
                itemStyle: {
                  color: "rgb(169,241,184)",
                },
              },
              null,
            ],
            type: "bar",
            stack: "Mon",
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示数值
                  position: "top", //数值在上方显示
                  textStyle: {
                    //数值样式
                    color: "rgb(147,224,249)", //字体颜色
                    fontSize: 14, //字体大小
                  },
                },
              },
            },
          },
          {
            barWidth: "20%",
            name: "物理试题四",
            data: [
              null,
              null,
              null,
              {
                value: 5.45,
                itemStyle: {
                  color: "rgb(51,188,254)",
                },
              },
            ],
            type: "bar",
            stack: "Mon",
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示数值
                  position: "top", //数值在上方显示
                  textStyle: {
                    //数值样式
                    color: "rgb(147,224,249)", //字体颜色
                    fontSize: 14, //字体大小
                  },
                },
              },
            },
          },
        ],
      };
      // 绘制图表
      myChart.setOption(option);
    },
复制

 

  getArbitration() {
      // 基于准备好的dom，初始化echarts实例
      const myChart = echarts.init(this.$refs.Arbitration);
      const option = {
        legend: {
          show: true,
          textStyle: {
            fontSize: 10, //字体大小
            color: "rgba(135,206,234)", //字体颜色
          },
          orient: "horizontal",
          top: "20",
          x: "40%",
          y: "center",
          itemWidth: 10,
          itemHeight: 3,
        },
        xAxis: [
          {
            name: "试题",
            tyoe: "category",
            axisTick: {
              // 轴刻度
              show: false,
            },
            axisLabel: {
              // 轴文字
              color: "rgb(51,188,254)",
              fontSize: 20,
            },
            axisLine: {
              // 轴线
              show: false,
            },
            data: ["物理试题一", "物理试题二", "物理试题三", "物理试题四"],
            axisLabel: {
              show: true,
              textStyle: {
                color: "rgb(51,188,254)",
              },
            },
 
            nameTextStyle: {
              color: "rgb(51,188,254)",
            },
          },
        ],
        yAxis: {
          name: "分数",
          nameTextStyle: {
            color: "rgb(51,188,254)",
          },
          type: "value",
          splitLine: {
            // 设置坐标轴在 grid 区域中的分隔线。
            show: true, // 是否显示分隔线。默认数值轴显示，类目轴不显示。
            lineStyle: {
              // 设置分割线式样
              // color: ['#aaa', '#ddd']   分隔线颜色，可以设置成单个颜色  Array || string
              type: "solid", // 线的类型。 string: 'solid' 'dashed' 'dotted' || number || Array
              opacity: 1, // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
              color: "rgb(31,87,145)",
            },
          },
          // data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff",
            },
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgb(31,87,145)",
            },
          },
        },
        series: [
          {
            name: "未仲裁",
            type: "bar",
            data: [
              {
                value: 38,
                itemStyle: {
                  color: "rgb(49,223,253)",
                },
              },
              {
                value: 32,
                itemStyle: {
                  color: "rgb(49,223,253)",
                },
              },
              {
                value: 28,
                itemStyle: {
                  color: "rgb(49,223,253)",
                },
              },
              {
                value: 26,
                itemStyle: {
                  color: "rgb(49,223,253)",
                },
              },
            ],
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示数值
                  position: "top", //数值在上方显示
                  textStyle: {
                    //数值样式
                    color: "rgb(147,224,249)", //字体颜色
                    fontSize: 14, //字体大小
                  },
                },
              },
            },
          },
          {
            name: "已仲裁",
            type: "bar",
            data: [
              {
                value: 15,
                itemStyle: {
                  color: "rgb(164,233,100)",
                },
              },
              {
                value: 15,
                itemStyle: {
                  color: "rgb(164,233,100)",
                },
              },
              {
                value: 17,
                itemStyle: {
                  color: "rgb(164,233,100)",
                },
              },
              {
                value: 8,
                itemStyle: {
                  color: "rgb(164,233,100)",
                },
              },
            ],
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示数值
                  position: "top", //数值在上方显示
                  textStyle: {
                    //数值样式
                    color: "rgb(147,224,249)", //字体颜色
                    fontSize: 14, //字体大小
                  },
                },
              },
            },
          },
        ],
      };
      // 绘制图表
      myChart.setOption(option);
    },
复制

 

 

getStOnePieChart() {
      const myChart = echarts.init(this.$refs.stOnePieChart);
      const option = {
        tooltip: {
          show: false,
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
 
        color: ["rgb(148,53,255)", "rgb(131,199,248)"],
        series: [
          {
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: "center",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              {
                value: 70,
              },
              {
                value: 100,
                label: {
                  normal: {
                    show: true,
                    formatter: "{d}%",
                    textStyle: {
                      fontSize: 12,
                      fontWeight: "bolder",
                    },
                  },
                },
              },
            ],
          },
        ],
      };
 
      myChart.setOption(option);
    },
复制

 

 

 getFractional() {
      // 基于准备好的dom，初始化echarts实例
      const myChart = echarts.init(this.$refs.fractional);
      const option = {
        tooltip: {
          trigger: "axis",
        },
 
        legend: {
          show: true,
          textStyle: {
            fontSize: 10, //字体大小
            color: "rgba(135,206,234)", //字体颜色
          },
          orient: "horizontal",
          top: "0",
          x: "70%",
          y: "center",
          itemWidth: 10,
          itemHeight: 3,
          data: ["物理试题一", "物理试题二", "物理试题三", "物理试题四"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            tyoe: "category",
            axisTick: {
              // 轴刻度
              show: false,
            },
            axisLabel: {
              // 轴文字
              color: "rgb(51,188,254)",
              fontSize: 20,
            },
            axisLine: {
              // 轴线
              show: false,
            },
            data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
            axisLabel: {
              show: true,
              textStyle: {
                color: "#fff",
              },
            },
 
            nameTextStyle: {
              color: "rgb(51,188,254)",
            },
          },
        ],
        yAxis: {
          name: "人数",
          nameTextStyle: {
            color: "rgb(51,188,254)",
          },
          type: "value",
          // data: [5, 10, 15, 20, 25, 30, 35, 40, 45, 50],
          splitLine: {
            // 设置坐标轴在 grid 区域中的分隔线。
            show: true, // 是否显示分隔线。默认数值轴显示，类目轴不显示。
            lineStyle: {
              // 设置分割线式样
              // color: ['#aaa', '#ddd']   分隔线颜色，可以设置成单个颜色  Array || string
              type: "solid", // 线的类型。 string: 'solid' 'dashed' 'dotted' || number || Array
              opacity: 1, // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
              color: "rgb(31,87,145)",
            },
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff",
            },
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgb(31,87,145)",
            },
          },
        },
        series: [
          {
            name: "物理试题一",
            type: "line",
 
            data: [1, 1, 1, 1, 9, 2, 2, 9, 1, 5],
            symbol: "circle",
            symoblSize: 20,
            itemStyle: {
              normal: {
                color: "rgb(76,255,174)",
                lineStyle: {
                  width: 4,
                  color: "rgb(76,255,174)",
                  type: "solid",
                },
              },
            },
          },
          {
            name: "物理试题二",
            type: "line",
            symbol: "circle",
            symoblSize: 20,
            data: [2, 1, 1, 2, 2, 3, 3, 9, 1, 5],
            itemStyle: {
              normal: {
                color: "rgb(53,223,255)",
                lineStyle: {
                  width: 4,
                  color: "rgb(53,223,255)",
                  type: "solid",
                },
              },
            },
          },
          {
            name: "物理试题三",
            type: "line",
            symbol: "circle",
            symoblSize: 20,
            data: [1, 2, 2, 4, 1, 0, 0, 9, 1, 5],
            itemStyle: {
              normal: {
                color: "rgb(76,255,174)",
                lineStyle: {
                  width: 4,
                  color: "rgb(76,255,174)",
                  type: "solid",
                },
              },
            },
          },
          {
            name: "物理试题四",
            type: "line",
            symbol: "circle",
            symoblSize: 20,
            data: [0, 2, 3, 4, 3, 3, 0, 9, 1, 5],
            itemStyle: {
              normal: {
                color: "rgb(53,223,255)",
                lineStyle: {
                  width: 4,
                  color: "rgb(53,223,255)",
                  type: "solid",
                },
              },
            },
          },
        ],
      };
      // 绘制图表
      myChart.setOption(option);
    },
复制

 

 

 getGlkstjEcharts(data) {
      const myChart = echarts.init(this.$refs.glkstjEcharts);
      const option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          show: true,
          textStyle: {
            fontSize: 15, //字体大小
            color: "rgba(135,206,234)", //字体颜色
          },
          orient: "horizontal",
          top: "0",
          selectedMode: false,
          y: "center",
          itemWidth: 10,
          itemHeight: 10,
          data: [
            "仲裁重考考生",
            "待编排考生",
            "缓考考生",
            "违规考生",
            "待仲裁考生",
          ],
        },
        // grid: {
        //   left: "3%",
        //   right: "4%",
        //   bottom: "3%",
        //   containLabel: true,
        // },
        xAxis: [
          {
            tyoe: "category",
            axisTick: {
              // 轴刻度
              show: false,
            },
            axisLabel: {
              // 轴文字
              color: "rgb(51,188,254)",
              interval: 0,
              // fontSize: 10,
            },
            axisLine: {
              // 轴线
              show: false,
            },
            data: [
              "天河区",
              "越秀区",
              "荔湾区",
              "海珠区",
              "番禺区",
              "白云区",
              "南沙区",
              "从化区",
              "增城区",
              "黄埔区",
              "花都区",
            ],
            axisLabel: {
              //轴文字完全显示
              interval: 0,
              show: true,
              textStyle: {
                color: "#fff",
              },
            },
 
            nameTextStyle: {
              color: "rgb(51,188,254)",
            },
          },
        ],
        yAxis: [
          {
            name: "人数",
            nameTextStyle: {
              color: "rgb(51,188,254)",
              fontSize: 20,
            },
            type: "value",
            // data: [0, 50, 100, 150, 200, 250],
            splitLine: {
              // 设置坐标轴在 grid 区域中的分隔线。
              show: true, // 是否显示分隔线。默认数值轴显示，类目轴不显示。
              lineStyle: {
                // 设置分割线式样
                // color: ['#aaa', '#ddd']   分隔线颜色，可以设置成单个颜色  Array || string
                type: "solid", // 线的类型。 string: 'solid' 'dashed' 'dotted' || number || Array
                opacity: 1, // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
                color: "rgb(31,87,145)",
              },
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#fff",
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "rgb(31,87,145)",
              },
            },
          },
        ],
        series: [
          {
            name: "仲裁重考考生",
            type: "bar",
            stack: "overlap",
            emphasis: {
              focus: "series",
            },
            data: [320, 332, 301, 334, 390, 500, 332, 301, 334, 390, 500],
            itemStyle: {
              normal: {
                color: "#39A0FF",
                lineStyle: {
                  width: 4,
                  color: "#39A0FF",
                },
              },
            },
          },
          {
            name: "待编排考生",
            type: "bar",
            stack: "overlap",
            emphasis: {
              focus: "series",
            },
            data: [120, 132, 101, 134, 90, 400, 332, 301, 334, 390, 500],
            itemStyle: {
              normal: {
                color: "#43D8DC",
                lineStyle: {
                  width: 4,
                  color: "#43D8DC",
                },
              },
            },
          },
          {
            name: "缓考考生",
            type: "bar",
            stack: "overlap",
            emphasis: {
              focus: "series",
            },
            data: [220, 182, 191, 234, 290, 300, 332, 301, 334, 390, 500],
            itemStyle: {
              normal: {
                color: "#0DC87D",
                lineStyle: {
                  width: 4,
                  color: "#0DC87D",
                },
              },
            },
          },
          {
            name: "违规考生",
            type: "bar",
            stack: "overlap",
            emphasis: {
              focus: "series",
            },
            data: [150, 232, 201, 154, 190, 200, 332, 301, 334, 390, 500],
            itemStyle: {
              normal: {
                color: "#F7C348",
                lineStyle: {
                  width: 4,
                  color: "#F7C348",
                },
              },
            },
          },
          {
            name: "待仲裁考生",
            type: "bar",
            stack: "overlap",
            data: [862, 1018, 964, 1026, 1679, 100, 332, 301, 334, 390, 500],
            emphasis: {
              focus: "series",
            },
            itemStyle: {
              normal: {
                color: "#F99414",
                lineStyle: {
                  width: 4,
                  color: "#F99414",
                },
              },
            },
          },
        ],
      };
      myChart.setOption(option);
    },
复制

转载请注明出处或者链接地址：https://www.qianduange.cn//article/23773.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

【EB-07】TC397 Tresos 导入通信ARXML

2025-03-15 13:03:18

力扣-单调栈-739 每日温度

2025-03-15 13:03:17

代码随想录二刷|图论2

2025-03-15 13:03:59

数据库原理4

2025-03-15 13:03:58

使用WebSocket进行通信的图形用户界面应用程序

2025-03-15 13:03:57

爬虫面试：关于爬虫破解验证码的13个经典面试题

2025-03-15 13:03:57

代码随想录第五十天| 图论理论基础

2025-03-15 13:03:56

java常见面试01

2025-03-15 13:03:56

Floyd算法——有向图

2025-03-15 13:03:55

将数据库结构化数据整合到RAG问答中的方式

2025-03-15 13:03:54

广告位招租：QQ85750956
大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS 动画效果（5种） - 附完整示例

2025-02-28 12:02:481000
3

在Vue中实现与OpenAI对话的功能

2025-02-27 11:02:161000
4

jQuery.flowchart 项目常见问题解决方案

2025-02-24 13:02:021000
5

CSS常用属性（文本属性）

2024-11-04 09:11:111000
6

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
7

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
8

vue使用datav echarts

2024-09-06 00:09:381000
9

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
10

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
浏览器升级提示：您的浏览器版本较低，建议您立即升级为知了极速浏览器，极速、安全、简约，上网速度更快！立即下载
复制成功！