vue2 echarts不同角色多个类型数据的柱状图

前端代码:

复制代码
先按照echarts插件。

在页面里引用
import * as echarts from "echarts";

设置div
<div style="width:100%;height:250px;margin-top: 4px;"  id="addressChart"></div>

方法:
addressEcharts() {
        const option = {
          grid: {
            left: '2%',
            right: '2%',
            bottom: '10%',
            containLabel: true
          },
          title: {
            text: '用户所在地理区域分布柱状图',
            textStyle:{
              fontSize:10,
              fontWeight:'300'
            },
          },
          xAxis: {
            data: ['浙江','上海']
          },

          yAxis: {
            type: "value",
            name: "单位(个)",
            nameTextStyle: {
              color: "#aaa",
              nameLocation: "start",
            },
          },
          legend: {
            data: ['软件企业', '设计企业', '检测企业'],
            top: '0%'
          },
          series: [{
            data: [0,1],
            type: "bar",
            smooth: true,
            name: '软件企业',
            label: {
              // 柱状图上方文本标签,默认展示数值信息
              show: true,
              position: "top"
            }
          },
          {
            data: [2,3],
            type: "bar",
            smooth: true,
            name: '设计企业',
            label: {
              // 柱状图上方文本标签,默认展示数值信息
              show: true,
              position: "top"
            }
          },{
            data: [4,5],
            type: "bar",
            smooth: true,
            name: '检测企业',
            label: {
              // 柱状图上方文本标签,默认展示数值信息
              show: true,
              position: "top"
            }
          }]
        };
        this.addressChart = echarts.init(document.getElementById("addressChart"));
        this.addressChart.setOption(option);
        //随着屏幕大小调节图表
        window.addEventListener("resize", () => {
          this.addressChart.resize();
        });
    },

如图:

其他图形的画图可参考echarts官网

相关推荐
東雪蓮☆15 分钟前
从零开始掌握 Web 与 Nginx:入门详解
运维·服务器·前端·nginx
脑子慢且灵16 分钟前
【JavaWeb】一个简单的Web浏览服务程序
java·前端·后端·servlet·tomcat·web·javaee
柯南二号21 分钟前
【大前端】 断点续传 + 分片上传(大文件上传优化) 的前端示例
前端
前端小超超27 分钟前
如何配置capacitor 打包的安卓app固定竖屏展示?
android·前端·gitee
xiaopengbc41 分钟前
在Webpack中,如何在不同环境中使用不同的API地址?
前端·webpack·node.js
前端AK君1 小时前
React中台系统如何嵌入到业务系统中
前端
Slice_cy1 小时前
不定高虚拟列表
前端
前端AK君1 小时前
React组件库如何在vue项目中使用
前端
Moonbit1 小时前
MoonBit 再次走进清华:张宏波受邀参加「思源计划」与「程序设计训练课」
前端·后端·编程语言
RestCloud1 小时前
一站式数据集成:iPaaS 如何让开发者和业务人员都满意?
前端·后端·架构