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

相关推荐
爱编程的喵3 分钟前
React入门实战:从静态渲染到动态状态管理
前端·javascript
Tttian62215 分钟前
npm init vue@latestnpm error code ETIMEDOUT
前端·vue.js·npm
患得患失94922 分钟前
【前端】【组件库开发】【原理】【无框架开发】现代网页弹窗开发指南:从基础到优化
前端
唐叔在学习26 分钟前
不用装插件!3轮对话,我用油猴脚本+AI复刻了掘金闪念笔记,真香!
javascript·浏览器
AliciaIr27 分钟前
深入React事件机制:解密“合成事件”与“事件委托”的底层奥秘
javascript·react.js
运维咖啡吧31 分钟前
给朋友们分享个好消息 7天时间23.5k
前端·程序员·ai编程
元气小嘉43 分钟前
前端技术小结
开发语言·前端·javascript·vue.js·人工智能
励志的大鹰哥1 小时前
V少JS基础班之第七弹
开发语言·javascript·ecmascript
神仙别闹1 小时前
基于ASP.NET+SQL Server实现(Web)企业进销存管理系统
前端·后端·asp.net
cccyi71 小时前
Vue3基础知识
javascript·vue.js