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官网

相关推荐
zwjapple43 分钟前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
像风一样自由20203 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem4 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊4 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术4 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
GISer_Jing4 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止4 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall4 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴4 小时前
简单入门Python装饰器
前端·python
袁煦丞5 小时前
数据库设计神器DrawDB:cpolar内网穿透实验室第595个成功挑战
前端·程序员·远程工作