网站首页 Vue 正文

vue+echarts实现3D柱形图_vue.js

作者：Cherry☼ 更新时间： 2022-06-05 Vue

本文实例为大家分享了vue+echarts实现3D柱形图的具体代码，供大家参考，具体内容如下

1、安装echarts

npm install echarts --save

2、引入echarts

import echarts from "echarts";
//修改原型链,可在全局使用
Vue.prototype.$echarts = echarts;

3、创建图表首先需要在 HTML 中创建图表的容器


     //图表的容器必须指定宽高
     #echarts_park {
         width: 400px;
         height: 200px;
}

4、渲染图表

mounted() {
    this.drawPark();
  },
  methods: {
    drawPark() {
        //初始化echarts
      let myChart = this.$echarts.init(document.getElementById("echarts_park"));
      let num= [
        "12",
        "12",
        "12",
        "14",
        "12",
        "12",
        "12",
        "14",
        "12",
        "12",
        "12",
      ];
      let xData = [
        "杭州市",
        "杭州市",
        "杭州市",
        "杭州市",
        "杭州市",
        "杭州市",
        "杭州市",
        "杭州市",
        "杭州市",
        "杭州市",
        "杭州市",
      ];
      var colors = [
        {
          type: "linear",
          x: 0,
          x2: 1,
          y: 0,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: "#0088F1",
            },
            {
              offset: 1,
              color: "#00D1FF",
            },
          ],
        },
        {
          type: "linear",
          x: 0,
          x2: 0,
          y: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "#67D0FF",
            },
            {
              offset: 1,
              color: "#3486DA",
            },
          ],
        },
      ];
      var barWidth = 18;
      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: function (params) {
            var tipString = params[0].axisValue + "
";
            var key = "value";
            params.sort(function (obj1, obj2) {
              var val1 = obj1[key];
              var val2 = obj2[key];
              if (val1 < val2) {
                return 1;
              } else if (val1 > val2) {
                return -1;
              } else {
                return 0;
              }
            });
            var indexColor;
            for (var i = 0, length = params.length; i < length; i++) {
              if (params[i].componentSubType == "bar") {
                indexColor = params[i + 1].color;
                tipString +=
                  '';
                tipString +=
                  ' -->

 
    
     
     
      栏目分类
     
      
    

    Vue
    前端文档
    小程序
  

      
    
    
    
    
     
     
      最近更新
     
      
      
            window11 系统安装 yarn 
            超详细win安装深度学习环境2025年最新版（ 
            Linux 中运行的top命令 怎么退出？ 
            MySQL 中decimal 的用法？ 存储小 
            get 、set 、toString 方法的使 
            @Resource和 @Autowired注解 
            Java基础操作-- 运算符，流程控制 Flo 
            1. Int 和Integer 的区别，Jav 
            spring @retryable不生效的一种 
            Spring Security之认证信息的处理 
            Spring Security之认证过滤器 
            Spring Security概述快速入门 
            Spring Security之配置体系 
            【SpringBoot】SpringCache 
            Spring Security之基于方法配置权 
            redisson分布式锁中waittime的设 
            maven:解决release错误：Artif 
            restTemplate使用总结 
            Spring Security之安全异常处理 
            MybatisPlus优雅实现加密？ 
            Spring ioc容器与Bean的生命周期。 
            【探索SpringCloud】服务发现-Nac 
            Spring Security之基于HttpR 
            Redis 底层数据结构-简单动态字符串（SD 
            arthas操作spring被代理目标对象命令 
            Spring中的单例模式应用详解 
            聊聊消息队列，发送消息的4种方式 
            bootspring第三方资源配置管理 
            GIT同步修改后的远程分支