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

相关推荐
mCell3 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip3 小时前
Node.js 子进程:child_process
前端·javascript
excel6 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel7 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼9 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping9 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙10 小时前
[译] Composition in CSS
前端·css
白水清风10 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix10 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780010 小时前
new、原型和原型链浅析
前端·javascript