使用Echart实现绘制立体的柱状图

效果图:

实现代码:

var xData3 = ["6", "7", "8", "9","10","11"];
    var data3 = [1209, 1715, 2408, 1308, 1308, 1145];
    var data5 = [4000, 4000, 4000, 4000, 4000,4000];
    var option = {
      tooltip: {
        trigger: "axis",
        show: false,
      },
      grid: {
        left: 50,
        bottom: 25,
        top: 30,
        right: 40,
      },
      xAxis: {
        data: xData3,
        name: "(月)",
        // 坐标轴刻度相关设置
        axisTick: {
          show: false,
        },
        // 坐标轴线的相关设置
        axisLine: {
          show: true,
          lineStyle: {
            color: "#414965",
          },
        },
        // 坐标轴刻度标签的相关设置
        axisLabel: {
          // 可以设置成 0 强制显示所有标签
          interval: 0,
          textStyle: {
            color: "#7089ba",
            fontSize: 12,
          },
          margin: 15, //刻度标签与轴线之间的距离。
        },
      },
      yAxis: {
        name: "单位: 万m³",
        nameTextStyle: {
          color: "#fff",
        },
        // 坐标轴在grid区域中的分隔线
        splitLine: {
          show: true,
          lineStyle: {
            color: "#414965",
            opacity: 0.3,
          },
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          textStyle: {
            color: "#7089ba",
            fontSize: 12,
          },
        },
      },
      series: [
        {
          //三个最低下的圆片
          // 系列名称,用于tooltip的显示,legend 的图例筛选,在 setOption 更新数据和配置项时用于指定对应的系列
          name: "",
          type: "pictorialBar",
          symbolSize: [20, 15],
          symbolOffset: [0, 10],
          z: 12,
          // 图形样式
          itemStyle: {
            opacity: 1,
            normal: {
              show: true,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#2d6ac5",//0%处的颜色
                },
                {
                  offset: 1,
                  color: "#2d6ac5",//100%处的颜色
                },
              ]),
              barBorderRadius: 0,
              borderWidth: 0,
            },
          },
          // 显示最底下的圆片
          data: [1, 1, 1, 1, 1,1],
        },

        //下半截柱状图
        {
          name: "2020",
          type: "bar",
          barWidth: 20,
          barGap: "100%",
          itemStyle: {
            //lenged文本
            opacity: 0.1,
            normal: {
              show: true,
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 0,
                  color: "#51b1f9",
                },
                {
                  offset: 1,
                  color: "#2f6ef6",
                },
              ]),
              barBorderRadius: 0,
              borderWidth: 0,
            },
          },
          label: {
            show: true,
            position: "top",
            distance: 10,
            color: "#fff",
          },

          data: data3,
        },
        {
          name: "", //头部
          type: "pictorialBar",
          symbolSize: [20, 15],
          symbolOffset: [0, -10],
          z: 12,
          symbolPosition: "end",
          itemStyle: {
            color: "#22589f",
            opacity: 1,
          },
          data: data5,
        },

        {
          name: "",
          type: "pictorialBar",
          // 图形的大小
          symbolSize: [20, 15],
          // 图形相对于原本位置的偏移
          symbolOffset: [0, -10],
          z: 12,
          itemStyle: {
            opacity: 1,
            normal: {
              show: true,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#48a4f8",
                },
                {
                  offset: 1,
                  color: "#7df4f9",
                },
              ]),
              barBorderRadius: 0,
              borderWidth: 0,
            },
          },
          // 图形的定位位置
          symbolPosition: "end",
          data: data3,
        },

        {
          name: "2019",
          type: "bar",
          barWidth: 20,
          // 如果想要两个系列的柱子重叠,可以设置 barGap 为 '-100%'。这在用柱子做背景的时候有用。
          barGap: "-100%",
          z: 0,
          itemStyle: {
            color: "#102a6f",
            opacity: 0.7,
          },
          data: data5,
        },
      ],
    };

    //this.Chart_init = echarts.init(this.Chart_dom.current);
    //this.Chart_init.setOption(option);

上面的代码就是实现效果图的配置。

到此这篇关于使用Echart实现绘制立体的柱状图的文章就介绍到这了,更多相关Echart立体柱状图内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vue+echarts实现堆叠柱状图

    本文实例为大家分享了vue+echarts实现堆叠柱状图的具体代码,供大家参考,具体内容如下 echarts-子组件 <template> <div class="chart" ref="chartEle"></div> </template> <script> import echarts from "echarts"; import eventBus from '@/componen

  • JS使用canvas技术模仿echarts柱状图

    canvas 画布是html5中新增的标签,可以通过js操作 canvas 绘图 API在网页中绘制图像. 百度开发了一个开源的可视化图表库ECharts,功能非常强大,可以实现折线图.柱状图.散点图.饼图.K线图.地图等多种图表.很多项目都有使用过ECharts开发过图表功能. 本实例教程使用原生js教你开发一个仿ECharts的柱状图.学习本教程之前,读者需要具备html和css技能,同时需要有简单的JavaScript基础. 按照ECharts的开发方法,图表都是生成在一个HTML元素中.

  • vue+echart实现双柱状图

    本文实例为大家分享了vue+echart实现双柱状图的具体代码,供大家参考,具体内容如下 效果图: 一.安装 版本号建议安装"echarts": "^4.8.0",其它版本init会报错 1. 首先需要安装echarts依赖包 npm install --save echarts@4.8.0 2. 或者使用国内的淘宝镜像: npm install -g cnpm --registry=https://registry.npm.taobao.org <templ

  • vue echarts实现柱状图动态展示

    本文实例为大家分享了vue echarts实现柱状图动态展示的具体代码,供大家参考,具体内容如下 轮播图形式展现 <template> <div class="dan"> <div id="scalesize" :style="{width: '100%', height: '100%'}"></div> </div> </template> <script> i

  • vue echarts实现横向柱状图

    本文实例为大家分享了vue echarts实现横向柱状图的具体代码,供大家参考,具体内容如下 实现效果: 代码: <template> <div class="OverYearsPompany"> <div id="OverYearsPompanyChart" style="flex: 1; height: 368px; margin-top: -42px"></div> </div>

  • Vue使用Echarts实现立体柱状图

    本文实例为大家分享了Vue使用Echarts实现立体柱状图的具体代码,供大家参考,具体内容如下 预览: 代码: 页面部分: <template> <div class="roadnum-all" ref="roadnumall"> <div id="roadnum" ref="dom"></div> </div> </template> CSS部分: .r

  • 使用Echart实现绘制立体的柱状图

    效果图: 实现代码: var xData3 = ["6", "7", "8", "9","10","11"]; var data3 = [1209, 1715, 2408, 1308, 1308, 1145]; var data5 = [4000, 4000, 4000, 4000, 4000,4000]; var option = { tooltip: { trigger: "

  • jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】

    本文实例讲述了jQuery插件HighCharts绘制简单2D柱状图效果.分享给大家供大家参考,具体如下: 1.实例代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HighCharts 2D柱状图</title> <script type="text/javascript" src="js/jquer

  • python绘制分组对比柱状图

    本文实例为大家分享了python绘制分组对比柱状图的具体代码,供大家参考,具体内容如下 首先放效果图:  # -*- coding: utf-8 -*- import numpy as np   import tensorflow as tf from matplotlib.path import Path from matplotlib.patches import PathPatch import matplotlib.pyplot as plt import matplotlib from

  • Python绘制百分比堆叠柱状图并填充图案

    通过Python中的matplotlib绘制百分比堆叠柱状图,并为每一个类别设置不同的填充图案.主要原因是有些论文打印出是黑白色的,不同类别之间区分不明显,所以做了这种方案. 存在一个问题:不知道如何根据填充图案设置图例,本文中可谓“曲线救国”,将图例的颜色块设置为了白色,所以如果有人知道如何根据hatching设置图例可以讨论,原始的legend方法中是未提供该类参数的. 图形如下: 代码如下 import numpy as np import matplotlib.pyplot as plt

  • python如何利用matplotlib绘制并列双柱状图并标注数值

    目录 项目场景: 代码: 效果图: 扩展功能及代码: 补充:Python画图实现同一结点多个柱状图 总结 项目场景: Python项目需要画两组数据的双柱状图,以下以一周七天两位小朋友吃糖颗数为例进行演示,用matplotlib库实现 代码: import matplotlib import matplotlib.pyplot as plt import numpy as np def drawHistogram(): matplotlib.rc("font", family='Mic

  • Python绘制多因子柱状图的实现示例

    目录 背景介绍 软件介绍 绘图教程 最后 背景介绍 R和Python作为两个开源.且容易上手的数据分析和绘图工具,在科研中应用的比较广泛. 在接下来的日子,我们围绕Python进行绘图和数据分析话题,写一系列推文,事实上是我自己的一些学习笔记分享出来,为了我 方便查阅,也方便大家翻阅. 软件介绍 [软件名称]:Anaconda | Spyder [软件安装]:可以参考下方这个推文 Anaconda的下载和安装 绘图教程 1.打开Spyder软件,我们导入相应的库,以及生成一组数据.(一开始作图的

  • python绘制发散型柱状图+误差阴影时间序列图+双坐标系时间序列图+绘制金字塔图

    目录 1.绘制发散型柱状图 2.绘制带误差阴影的时间序列图 3.绘制双坐标系时间序列图 4.绘制金字塔图 1.绘制发散型柱状图 python绘制发散型柱状图,展示单个指标的变化的顺序和数量,在柱子上添加了数值文本. 实现代码: import numpy as np import pandas as pd import matplotlib as mpl import matplotlib.pyplot as plt import seaborn as sns import warnings wa

  • React+CSS 实现绘制竖状柱状图

    前言: 页面结构分为两个部分,柱状图 + 文字为一部分,标注为为一部分. 先来看柱状图 + 文字这一部分. 宽度定为 width: 55, height 高度使用百分比进行动态变化.整个部分使用 flex 布局.通过 justify-content: space-around; 属性,对里面的项目进行排列.项目 item 同样使用 flex 布局,这个是对 柱状图 + 文字 进行整体的排列. <div className="crosswise_diagram_top"> {

  • 详解Python 3D引擎Ursina如何绘制立体图形

    目录 编写第一个程序 绘制实体长方体 对实体进行同样比例的放大和缩小 对实体进行任意放大 绘制球体 为你的实体上色 Python有一个不错的3D引擎——Ursina Ursina官网:www.ursinaengine.org 打开cmd,控制台输入pip install ursina以安装ursina 编写第一个程序 首先导入ursina from ursina import * 然后创建app app=Ursina() 运行app app.run() 最终代码: from ursina imp

  • C# 绘制统计图大全(柱状图, 折线图, 扇形图)

    统计图形种类繁多, 有柱状图, 折线图, 扇形图等等, 而统计图形的绘制方法也有很多, 有Flash制作的统计图形, 有水晶报表生成统计图形, 有专门制图软件制作, 也有编程语言自己制作的:这里我们用就C# 制作三款最经典的统计图: 柱状图, 折线图和扇形图:既然是统计, 当然需要数据, 这里演示的数据存于Sql Server2000中, 三款统计图形都是动态生成. 其中柱状图我会附上制作步骤, 其他两款统计图直接附源码. 说明: 需求不一样, 统计图形绘制后的显示效果也不一样, 比如这里柱状图

随机推荐