vue+echarts实现3D柱形图

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

1、安装echarts

npm install echarts --save

2、引入echarts

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

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

<div id="echarts_park"></div>
     //图表的容器必须指定宽高
     #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 + "<br />";
            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 +=
                  '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background:' +
                  indexColor +
                  '"></span>';
                tipString +=
                  '<span data-type ="lineTip" data-val=' +
                  params[i].value +
                  ">" +
                  params[i].seriesName +
                  ":" +
                  params[i].value +
                  "</span><br />";
              }
            }
            return tipString;
          },
        },
        grid: {
          left: "3%",
          right: "3%",
          bottom: "6%",
          top: "20%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: xData,
          offset: 6,
          axisLine: { lineStyle: { color: " #CCCCCC" } },
          axisTick: {
            alignWithLabel: true,
          },
          axisLabel: {
            interval: 0,
            // rotate: 20,
            textStyle: {
              color: "#000",
              fontStyle: "normal",
              fontFamily: "微软雅黑",
              fontSize: 13,
              margin: 10,
            },
          },
        },

        yAxis: {
          type: "value",
          name: "(%)",
          nameTextStyle: {
            align: "right",
            color: "#4D4D4D",
          },
          axisLine: {
            show: false,
            lineStyle: { color: "#CCCCCC" },
          },
          axisTick: { show: false },
          splitLine: {
            show: true,
            lineStyle: { type: "dashed", color: "#CCCCCC" },
          },
          axisLabel: {
            textStyle: {
              color: "#4D4D4D",
              fontSize: 14,
            },
          },
        },
        series: [
          {
            name: "2020",
            type: "bar",
            barGap: "14%",
            barWidth: 18,
            itemStyle: {
              normal: {
                color: colors[1],
                barBorderRadius: 0,
              },
            },
            data: num,
          },
          {
            z: 2,
            name: "2020",
            type: "pictorialBar",
            data: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
            symbol: "diamond",
            symbolOffset: ["0%", "50%"],
            symbolSize: [barWidth, 10],
            itemStyle: {
              normal: {
                color: colors[1],
              },
            },
          },
          {
            z: 3,
            name: "2020",
            type: "pictorialBar",
            symbolPosition: "end",
            data: qichu,
            symbol: "diamond",
            symbolOffset: ["0%", "-50%"],
            symbolSize: [barWidth, (10 * (barWidth - 1)) / barWidth],
            itemStyle: {
              normal: {
                borderColor: "#67D0FF",
                borderWidth: 2,
                color: "#67D0FF",
              },
            },
          },
        ],
      });
    },
},

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • vue基于echarts实现立体柱形图

    立体柱形图是由前面.右面.上面三部分组成,绘制时需要先绘制前面为一个图形,右面和上面绘制为一个图形,然后在echats中注册,在option的series中renderItem中渲染 代码如下: (1)注册绘制图形 registry () { let MyCubeRect = this.$echarts.graphic.extendShape({ shape: { x: 0, y: 0, width: 20, zWidth: 8, zHeight: 4 }, buildPath: functio

  • 使用D3.js+Vue实现一个简单的柱形图

    最近想在Vue的项目里尝试使用d3.js,封装一些常用的图表.这里记录一下自己搭建项目的过程,以及实现一个简单的柱形图.不了解D3的请移步D3 Data-Driven Documents,它是基于数据驱动文档工作方式的一款JavaScript函数库,主要用于网页作图.生成互动图形,是最流行的可视化库之一. 说明 采用Vue-cli脚手架快速搭建项目 npm 安装 D3 实现一个简单的柱形图 项目搭建 使用vue-cli搭建单页应用: # 安装 vue-cli $ npm install --gl

  • vue使用echarts实现水平柱形图实例

    文件结构: testData.js文件 const dtuEdition = { name: '有方有线', number: 60, proportion: 40, edition: { '有方有线V1.0.0': 20, '有方有线V1.2.0': 15, '有方有线V2.0.1': 10, '有方有线V3.0.0': 8, '有方有线V3.2.0': 5, '有方有线V3.4.0': 4, '有方有线V4.0.0': 3, '有方有线V4.0.2': 2, '有方有线V4.0.3': 1 }

  • vue+echarts实现3D柱形图

    本文实例为大家分享了vue+echarts实现3D柱形图的具体代码,供大家参考,具体内容如下 1.安装echarts npm install echarts --save 2.引入echarts import echarts from "echarts"; //修改原型链,可在全局使用 Vue.prototype.$echarts = echarts; 3.创建图表 首先需要在 HTML 中创建图表的容器 <div id="echarts_park">&

  • vue使用echarts实现立体柱形图

    本文实例为大家分享了vue使用echarts实现立体柱形图的具体代码,供大家参考,具体内容如下 立体柱形图是由前面.右面.上面三部分组成,绘制时需要先绘制前面为一个图形,右面和上面绘制为一个图形,然后在echats中注册,在option的series中renderItem中渲染代码如下: (1)注册绘制图形 registry () {       let MyCubeRect = this.$echarts.graphic.extendShape({         shape: {      

  • Vue Echarts实现带滚动效果的柱形图

    本文实例为大家分享了Vue Echarts实现带滚动效果的柱形图的具体代码,供大家参考,具体内容如下 代码 <template>   <div class="timeLineview">     <div v-bind:style="{ height: heightData + 'px' }" ref="categoryChart"></div>     <div v-bind:style=&

  • Vue Echarts实现带滚动效果的柱形图

    本文实例为大家分享了Vue Echarts实现带滚动效果柱形图的具体代码,供大家参考,具体内容如下 代码 <template>   <div class="timeLineview">     <div v-bind:style="{ height: heightData + 'px' }" ref="categoryChart"></div>     <div v-bind:style=&q

  • Vue Echarts实现可视化世界地图代码实例

    Echarts实现可视化世界地图模拟迁徙,以我自己开发过程. 下载Echarts依赖: npm install echarts 成功以后引入依赖: import echarts from 'echarts' peopleInsertCharts为生成echarts容器. let myChart = echarts.init(document.getElementById('peopleInsertCharts')) 容器一定要给宽高,否则echarts生成初始化页面不会显示.需要自适应的可以js

  • vue+echarts实现可拖动节点的折线图(支持拖动方向和上下限的设置)

    本篇文档主要是利用echarts实现可拖动节点的折线图,在echarts中找到了一个demo,传送门:https://echarts.baidu.com/examples/editor.html?c=line-draggable,但是不是用vue写的,并且在改写为vue组件的过程中遇到了很多问题,在百度过程中发现并没有相关的文档,所以决定自己开发,并在demo的基础上开发了一些实用的功能,所以把这个过程记录下来.文档中还有很多不够完善的地方,欢迎讨论哈! 需求:制作一个折线图用于显示当前24小时

  • vue+echarts实现动态绘制图表及异步加载数据的方法

    前言 背景:vue写的后台管理,需要将表格数据绘制成图表(折线图,柱状图),图表数据都是通过接口请求回来的. 安装 cnpm install echarts --s   (我这里用了淘宝镜像,不知道同学自行百度) 实例化   在已有的项目中下载好了echarts 之后,可以打开官方文档,但是我觉得官方文档对于实例化介绍的不够清晰,这也是我为什么在这么多的文章中还要写的原因,前辈写的太模糊了,我决定好好给后来人,需要在项目中引用图表的人,一些实用,快捷的东西. 官方文档:http://echart

  • 解决Vue + Echarts 使用markLine标线(precision精度问题)

    在VUE实例中使用Echarts 安装echarts依赖: npm install echarts -s 编写代码: 引入echarts对象: 鉴于准备工作中已经通过npm安装了echarts依赖,所以可以直接在vue文件中使用代码import echarts from "echarts"引入echarts对象: <script> import echarts from 'echarts/lib/echarts' </script> 注意:只引入了echarts

  • vue+echarts实现动态折线图的方法与注意

    之前公司有个绘制实时盈利率折线图的需求,实现的还不错,今天来分享下vue+echarts实现动态折线图的方法. 实现代码 <template> <div id="myChart"></div> </template> <script> import echarts from 'echarts' export default { name: 'DynamicLineChart', data () { return { // 实时

随机推荐