echarts 柱状图 （横）

最新推荐文章于 2024-05-14 02:23:42 发布
最新推荐文章于 2024-05-14 02:23:42 发布
阅读量361 收藏
点赞数
分类专栏： echarts 文章标签： echarts javascript ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/M781101/article/details/129236825
版权 

nonOperatingEchartsHx(operationData){
  let chartDom = document.getElementById("nonOperatingEchartsHx");
  let myChart = echarts.init(chartDom);
  let yLabel = ["投资类 67%", "非投资类 74%", ];

  let option = {
    color: [new echarts.graphic.LinearGradient(
      0,
      0,
      1,
      0,
      [
        {
          offset: 0,
          color: '#C38F60',
        },

        {
          offset: 1,
          color: '#FEDCBB',
        },
      ],
      false
    ), new echarts.graphic.LinearGradient(
      0,
      0,
      1,
      0,
      [
        {
          offset: 0,
          color: '#A7D6EC',
        },

        {
          offset: 1,
          color: '#4E6783',
        },
      ],
      false
    )],
    grid: {
      left: "5%",
      right: "20%",
      bottom: "15%",
      top: "5%",
      containLabel: true,
    },

    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "none",
      },
    },
    xAxis: {
      show: true,
      type: "value",
      axisLabel: {
        show: true,
        margin: 15,
        textStyle: {
          color:'#9FCCE2'

        },
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: true,
        lineStyle: {
          color:'#192935'
        },
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: "dashed",
          color:'#192935'
        },
      },
    },
    yAxis: [
      {
        type: "category",
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,//坐标上的刻度显示
        },
        axisLabel: {//文字显示
          show: true,
          margin: 15,
          color:'#9FCCE2',
          formatter: function (params, index) {
            console.log("params",params)
            var newParamsName = "";
            var splitNumber = 5;
            var paramsNameNumber = params && params.length;
            if (paramsNameNumber && paramsNameNumber <= 4) {
              splitNumber = 4;
            } else if (paramsNameNumber >= 5 && paramsNameNumber <= 7) {
              splitNumber = 4;
            } else if (paramsNameNumber >= 8 && paramsNameNumber <= 9) {
              splitNumber = 5;
            } else if (paramsNameNumber >= 10 && paramsNameNumber <= 14) {
              splitNumber = 5;
            } else {
              params = params && params.slice(0, 15);
            }

            var provideNumber = 4; //一行显示几个字
            var rowNumber = Math.ceil(paramsNameNumber / provideNumber) || 0;
            if (paramsNameNumber > provideNumber) {
              for (var p = 0; p < rowNumber; p++) {
                var tempStr = "";
                var start = p * provideNumber;
                var end = start + provideNumber;

                if (p == rowNumber - 1) {
                  tempStr = params.substring(start, paramsNameNumber);
                } else {
                  tempStr = params.substring(start, end) + "\n";
                }
                newParamsName += tempStr;
              }

            } else {
              newParamsName = params;
            }
            params = newParamsName
            //给他添加样式
            return  params
          },

        },
        splitLine: {
          show: false,//区域内的刻度显示

        },


        data: yLabel,
      },
    ],
    series: [
      {
        name: "",
        type: "bar",
        zlevel: 1,
        barWidth: 5,
        barGap:'200%',
        label: {//柱状图上面的信息显示
          normal: {
            show: true,
            position: "right",
            textStyle: {
              color:'#FEFEFE'
            },
            formatter: function (value) {
              return value.value + '万';
            },

          }},
        data: [287.72, 121.19],
      },
      {
        name: "",
        type: "bar",
        zlevel: 1,
        barWidth: 5,
        barGap:'150%',//两个柱子之间的间距
        label: {
          normal: {
            show: true,
            position: "right",
            textStyle: {
              color:'#FEFEFE'
            }
          },
          formatter: function (value) {
            return value.value + '万';
          },
          },

        data: [262.52, 178.35,],
      },
    ],
  };

  option && myChart.setOption(option);
  this.echartsEntityArr.push(myChart);

}

 

planEchart(){
        let chartDom = document.getElementById("planEchart");
        let myChart = echarts.init(chartDom);
        let planArr=[2000,321,523,654 ]
        let result = [
          {name:'投资',value:25},
          {name:'居民用户发展',value:55},
          {name:'非居民用户发展',value:85},
          {name:'LNG产销',value:65},
        ]
        let percentData=[25,34,56,21 ]
      let  option = {
          color:new echarts.graphic.LinearGradient(
            0,
            1,
            0,
            0,
            [
              {
                offset: 0,
                color: '#4E6783',
              },
              {
                offset: 1,
                color: '#A7D6EC',
              },
            ],
            false
          ),
          tooltip: {
            show: true,
            trigger: 'item',
            padding: [5, 10],
            backgroundColor: '#5A6872',
            borderColor: 'rgba(3, 11, 44, 0.5)',
            textStyle: {
              color: 'rgba(255, 255, 255, 1)'
            },
          },
          legend: {
            show: false,
          },
          grid: {
            left: '25%',
            right: '16%',
            top: '5%',
            bottom: '5%',
          },
          xAxis: [
            {
              splitLine: {
                show: false,
              },
              type: 'value',
              show: false,
            },
          ],
          yAxis: [
            {
              splitLine: {
                show: false,
              },
              axisLine: {
                show: false,
              },
              type: 'category',
              axisTick: {
                show: false,
              },
              inverse: true,
              data: result.map((item)=>item.name),
              axisLabel: {
                color: '#98B7C9',
                fontSize: 12,
                margin: 10,
              },
            },
            {
              type: 'category',
              inverse: true,
              axisTick: 'none',
              axisLine: 'none',
              show: true,
              axisLabel: {
                textStyle: {
                  color: '#fff',
                  fontSize: 12,
                },
                formatter: function (value) {
                  return value + '%';
                },

              },

              data: percentData.map((item)=>item)
            },
          ],
          series: [
            {
              name: '率',
              type: 'bar',
              barWidth: 5, // 柱子宽度
              MaxSize: 0,
              showBackground: true,
              backgroundStyle: {
                color:'#5A6872',
                borderRadius: 3,
              },
              label: {
                show: true,
                textStyle: {
                  color: '#98B7C9',
                  fontSize: 12,
                },

                formatter: function (params) {
                  return [params.value+'/'+planArr[params.dataIndex]];
                },
                position: 'top', // 位置
                fontSize: 14,
                distance: 4,// 距离
              },
              itemStyle: {
                borderRadius: 5,
              },
              data: result.map((item,index)=>{
                return{
                  name:item.name,
                  value:item.value,
                  itemStyle:{
                    color:new echarts.graphic.LinearGradient(
                      0,
                      0,
                      1,
                      0,
                      [
                        {
                          offset: 0,
                          color: '#4E6783',
                        },

                        {
                          offset: 1,
                          color: '#A7D6EC',
                        },
                      ],
                      false
                    ),
                  }
                }
              }),
            },
          ],
        };

        option && myChart.setOption(option);
        this.echartsEntityArr.push(myChart);

      },

 

微笑小土豆
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用echarts实现双向柱状图
09-02
1、文件夹下载下来后直接双击html文件即可... 2、项目中多次使用，保证稳定； 3、代码中有详细的介绍说明； 4、可以单独拿出来作为插件使用； 5、echarts基本图例里面不存这个图形; 6、有问题欢迎留言，看到会解答；
springboot echarts vue 柱状图
01-25
SpringBoot提供后台接口，vue作为前台，使用echarts取后台数据展示柱状图
echarts 横向柱状图
热门推荐
zhangyuliang6430的博客
09-27 1万+
echarts 柱状图 两层 具体代码如下 var myColor = ['#81E7ED'] //内柱状图颜色 var dataLine = [50, 66, 33, 25] let positionLeft = 0.4, max = 100 + 2*positionLeft var option = { grid: [ { le...
echarts之横式柱状图
zxctime的博客
06-25 4662
echarts之横式柱状图 效果图 原理 设置x轴为不显示，只显示y轴 设置两个y轴，一个显示柱子，另一个只显示柱子的边框 通过设置两个y轴柱子的层次度，使得看起来像是一个柱子 该实例是在官方例子的基础上修改的 官网例子地址：https://echarts.apache.org/examples/zh/editor.html?c=bar-y-category 简单效果图： 柱状图颜色可以自定义，数据为虚拟数据 option = { // 指定图形与Dom距离 grid: {
2024年echarts横向柱状图Demo(2)，物联网嵌入式开发开发者必看
最新发布
2401_85012069的博客
05-14 187
电子书籍、讲解视频，并且后续会持续更新**
echart柱状图横向_echarts 横向柱状图TOP10
weixin_35887222的博客
01-14 1508
1.position 决定标签在图形的位置；2.formatter中对数据进行处理，经过判断给相应的位置添加相应的样式信息，这一块要依赖rich，具体的用法参考echarts官网；series: [{data: data1,type: 'bar',barWidth:'20%',barGap:'20%',label:{show:true,position: [10,-13],// formatte...
echarts 柱形图 只有一条数据 靠左显示
qq_37299479的博客
07-14 6198
默认是居中显示
echarts 横向柱状堆叠图
走码观花
10-13 1675
var optionBar = { title: { /*text: '世界人口总量',*/ subtext: '单位：%' }, tooltip : { trigger: 'axis', axisPointer : { // 坐标轴指示器，坐标轴触发有效 type : 'shadow' // 默认为直线，可选为：'line' | 'shadow' } }, grid: { ...
echarts 绘制横向柱状图 并下载echarts图表
lucky569的博客
10-29 1360
效果图如下: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /&gt
【JavaScript源代码】vue echarts实现横向柱状图.docx
12-29
vue echarts实现横向柱状图 　本文实例为大家分享了vue echarts实现横向柱状图的具体代码，供大家参考，具体内容如下　实现效果：　代码：　<template>　<div class="OverYearsPompany">　; height: 368px; margin-...
Echarts动态排名柱状图(自适应电脑和手机端)源代码
10-09
Echarts动态排名柱状图(自适应电脑和手机端)源代码，参见：https://blog.csdn.net/weixin_41290949/article/details/120672844
ECharts柱状图，x轴数据相同要求只展示一条数据
qq_41964720的博客
07-21 1116
ECharts柱状图，x轴数据相同要求只展示一条数据
堆叠横向柱状图顶部显示数值和
M__Yang_的博客
09-26 1278
echarts堆叠柱状图
echart 多柱图只显示部分数据标签_数据可视化-监控大屏呈现和拓扑图绘制工具总结...
weixin_39661405的博客
11-24 716
在日常项目建设和实施过程中，经常会遇到类似数据可视化的实现场景。对于数据可视化已经从简单的统计图表展现，扩展到类似监控大屏，拓扑图，流程编排图，集成架构图等方面的呈现。而这些往往不是简单的使用图表就能够解决的。因此今天总结下对于数据可视化和图形绘制方面的工具整理。数据可视化综述推荐首先阅读知乎的关于有哪些可视化工具推荐的回答，内容已经相当全面了https://www.zhihu.com/quest...
16Echarts - 折线图（Line Chart in Cartesian Coordinate System）
阿甘兄
04-30 2270
效果图 源代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="js/echarts.min.js">&lt...
echarts 横向柱状图 不带进度条 最大值为最长的一条
it_varlue的博客
01-13 695
这种效果 。 后面的数据可以带 可以不带。 先上代码 import React, { Component, useState, useEffect, useMemo } from 'react'; import * as echarts from 'echarts'; import { DatasetComponent, GridComponent, VisualMapComponent } from 'echarts/components'; import { BarChart } from ...
echarts中设置柱状图(条形图)为横向展示-每条线上不同颜色
JackieDYH的博客
11-03 5339
效果图 效果代码 option = { textStyle:{ // fontSize: arr.initHeight, color: 'black'//字体颜色 }, yAxis: { data: ['防洪防漏设备','出入口设备','消防设备','公共区域设备',], axisTick:{ //x轴刻度线 show:fal..
echarts 柱状图横向
09-13
可以使用 ECharts 中的 bar 图表来实现横向柱状图。 首先，你需要在 HTML 文件中引入 ECharts 的库文件。可以从 ECharts 的官方网站上下载最新版本的库文件，并在 HTML 文件中添加如下代码： ```html ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值