ECharts4柱状图自定义（样式设置和数据dataset设置）

已于 2022-02-06 23:26:13 修改
阅读量1w 收藏 16
点赞数 1
分类专栏： 网页 文章标签： echarts dataset 柱状图
于 2019-07-26 23:32:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gongjianbo1992/article/details/97433970
版权

0.前言

ECharts 是一款由百度前端技术部开发的，基于 Javascript 的数据可视化图表库。由于功能强大，文档和示例也做得很好，适合快速构建图表原型以应用于产品。

1.下载Echarts.js

百度搜索echarts进官网，点击菜单栏的下载，然后根据需要进行下载。

下载页： https://www.echartsjs.com/download.html

我一般选在线定制，然后勾选自己需要的组件来生成js文件就行了。

2.柱状图自定义

先上效果参考图：

（代码基于Echarts4，用到了dataset，旧版本的话参考下就行了，并且我没用到里面的图例图题等东西。另外，参考里那个博客写的挺详细的）

本文代码链接：https://github.com/gongjianbo/LearnECharts/tree/master/echarts_bar

<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <title>ECharts Bar</title>
    <style>
        html,
        body,
        #echarts {
            margin: 0px;
            padding: 0px;
            height: 100%;
            width: 100%;
        }

        /*隐藏滚动条*/
        html {
            overflow-x: hidden;
            overflow-y: hidden;
        }
    </style>
</head>

<body>
    <!-- 一般是一个具有高宽的div元素 -->
    <div id="echarts"></div>
    <!-- ECharts文件引入 -->
    <script src="echarts.js"></script>
    <script type="text/javascript">
        var worldMapContainer = document.getElementById('echarts');

        //窗体自适应
        var resizeWorldMapContainer = function () {
            worldMapContainer.style.width = window.innerWidth + 'px';
            worldMapContainer.style.height = window.innerHeight + 'px';
        };
        resizeWorldMapContainer();
        window.onresize = function () {
            resizeWorldMapContainer();
            myChart.resize();
        };

        //这里创建一个ECharts实例，返回 echartsInstance，不能在单个容器上初始化多个 ECharts 实例。
        //通过init设置图表实例的配置项以及数据，万能接口，所有参数和数据的修改都可以通过 setOption 完成，
        //ECharts 会合并新的参数和数据，然后刷新图表。
        //如果开启动画的话，ECharts 找到两组数据之间的差异然后通过合适的动画去表现数据的变化。
        var myChart = echarts.init(worldMapContainer);
        //这里用一个列表来放渐变色
        var colorList = [
            //四个值分别代表右下左上，有数值是起点，一般写1方便计算
            //offset取值[0,1]，径向路径起点到终点的位置
            //从上到下
            new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: "#FF0000"
                },
                {
                    offset: 1,
                    color: "#FFFF00"
                }
            ]),
            //从左到右
            new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                    offset: 0,
                    color: "#00FF00"
                },
                {
                    offset: 1,
                    color: "#00FFFF"
                }
            ]),
            //右上到左下
            new echarts.graphic.LinearGradient(1, 0, 0, 1, [{
                    offset: 0,
                    color: "#FF0000"
                },
                {
                    offset: 0.5,
                    color: "#00FF00"
                },
                {
                    offset: 1,
                    color: "#0000FF"
                }
            ])
        ];
        //小圆点颜色列表
        var pointColorList = ['red', 'green', 'blue'];
        // 初始化设置
        myChart.setOption({
            //提示框
            tooltip: {

                //触发方式可以是坐标轴'axis'，数据项'item'
                trigger: 'axis',
                // 坐标轴指示器
                axisPointer: {
                    // 默认为直线'line'，可选为阴影'shadow'
                    type: 'shadow'
                },
                //提示内容的回调函数
                formatter: function (params) {
                    //嵌入html的方式自定义小圆点
                    var dot =
                        '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' +
                        pointColorList[params[0].dataIndex] + ';"></span>';
                    return params[0].data.type + "<br/> " +
                        dot + " total:" + params[0].data.total
                }
            },
            //网格
            grid: {
                //grid外的占比
                left: '1%',
                right: '1%',
                top: '3%',
                bottom: '3%',
                //grid 区域是否包含坐标轴的刻度标签
                containLabel: true
            },

            xAxis: {
                type: 'category',
                //可以指定参数的顺序，但是不会改变params[0].dataIndex顺序
                //data: ['总数', '在线', '离线'],
                //刻度label
                axisLabel: {
                    textStyle: {
                        color: '#c9c9ca'
                    }
                },
                //刻度线
                axisLine: {
                    lineStyle: {
                        color: '#c9c9ca',
                        width: 1
                    }
                },
                //坐标刻度相关
                axisTick: {
                    //刻度线和标签对齐
                    alignWithLabel: true
                }
                //设置字体倾斜
                /*axisLabel: {
                    interval: 0,
                    rotate: 45,
                    margin: 2,
                    textStyle: {
                        color: '#c9c9ca',
                        fontSize: '9',
                        fontFamily: 'PingFang-Sc-Heavy',
                    }
                }*/
            },
            yAxis: {
                //坐标轴在 grid 区域中的分隔线
                splitLine: {
                    show: true
                },
                type: 'value',
                axisLabel: {
                    textStyle: {
                        color: '#c9c9ca'
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: '#c9c9ca',
                        width: 1
                    }
                }
            },
            //数据展示
            series: [{
                //柱状图
                type: 'bar',
                //柱子宽度在item宽度的占比
                barWidth: "45%",
                itemStyle: {
                    normal: {
                        //柱子颜色
                        color: function (params) {
                            return colorList[params.dataIndex];
                        }
                    }
                },
                //柱子上的label
                label: {
                    normal: {
                        show: true,
                        position: 'insideTop',
                        formatter: function (params) {
                            return params.data.size
                        }
                    }

                },
                //重新映射x轴和y轴的数据
                encode: {
                    x: ['type'],
                    y: ['total']
                }
            }],
            //ECharts 4 开始支持了 dataset 组件用于单独的数据集声明，
            //从而数据可以单独管理，被多个组件复用，并且可以基于数据指定数据到视觉的映射。
            dataset: {
                //临时用的数据
                source: [{
                    "type": "在线",
                    "total": 10,
                    "size": 20
                }, {
                    "type": "离线",
                    "total": 10,
                    "size": 20
                }, {
                    "type": "总数",
                    "total": 20,
                    "size": 40
                }]
            }
        });

        //将json数组作为参数进行动态设置
        function setChartData(jsonarray) {
            //alert(jsonarray)
            myChart.setOption({ //加载数据图表
                dataset: [{
                    source: jsonarray
                }]
            });
        };
    </script>
</body>

3.参考

官方示例：https://www.echartsjs.com/examples/

官方文档：https://www.echartsjs.com/api.html#echarts 

博客参数说明：Echarts数据可视化grid直角坐标系（xAxis、yAxis），开发全解+完美注释_全栈工程师开发手册（原创）(腾讯内推)-CSDN博客_echarts直角坐标系

博客dataset：Echarts 定制化封装之dataset - wlc534的个人空间 - OSCHINA - 中文开源技术交流社区

龚建波
关注
  • 1
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
使用echarts实现立体-柱状图
07-21
效果图 https://mp.csdn.net/mp_blog/creation/editor/125918054 用echarts实现立体-柱状图ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭ECharts 内置的 dataset 属性（4.0+）支持直接传入包括二维表，key-value 等多种格式的数据源，通过简单的设置 encode 属性就可以完成从数据到图形的映射，这种方式更符合可视化的直觉，省去了大部分场景下数据转换的步骤，而且多
org.swtchart.examples
04-29
柱状图、曲线的绘制
Echarts 柱状图使用
m0_58755066的博客
02-22 679
Echarts 柱状图使用
利用torch.utils.data.Dataset自定义数据加载类
12-21
import torch as t from torch.utils import data import os from PIL import Image import numpy as np import torchvision.transforms as T transforms = T.Compose([ 　　T.Resize(224), 　　T.CenterCrop(224), 　　T.ToTensor(), 　　T.Normalize(mean=(0.5, 0.5, 0.5), std=(0.5, 0.5, 0.5)) ]) # 继承Dataset类要重写__getitem__
ASP.NET绑定sql数据库采用echarts显示数据图表(实现了柱状图和饼图).zip
12-12
ASP.NET绑定sql数据库采用echarts显示数据图表，已封装成类文件
Echarts自定义柱状图
weixin_68854196的博客
10-20 731
自定义柱状图
e-charts自定义柱状图
Bonjours的专栏
12-24 1651
先看完成效果，是这样子的： 可以说把默认的e-charts柱状图改的7788了。 罗列出来以下几点： 1、去掉y轴（刻度值的）刻度线 2、去掉y轴（刻度值的）边框 3、改变柱状图颜色为渐变色 4、tooltip显示横坐标的值（数字）+横坐标单位（月） 5、自定义tooltip左侧小圆点 6、xy轴文字属性设置 7、y轴分割线颜色（与x轴等长的横向刻度线颜色） 8、修改x轴（...
echarts柱状图每根柱子顶部自定义图标，看代码
handsome_man__的博客
08-04 1872
echarts柱状图每根柱子上自定义图标，看代码。 找了好多文章资源才弄出来，大家不要嫌弃，随便点个攒就好。
【Echarts第二篇】自定义柱状图的样式
Wonder_Risk的博客
03-23 4790
以使用频率较高的颜色开始走起~！ 一.自定义颜色 如果系列没有设置颜色，则会依次循环从该列表中取颜色作为系列颜色。 官方文档给出的默认颜色列表为: [’#c23531’,’#2f4554’, ‘#61a0a8’, ‘#d48265’, ‘#91c7ae’,’#749f83’, ‘#ca8622’, ‘#bda29a’,’#6e7074’, ‘#546570’, ‘#c4ccd3’] 但实际上...
echarts自定义柱状图柱体形状
常小胖的博客
08-24 8167
一、原理 使用symbol属性，自己从图标库找到自己喜欢的图标，使用’image://路径‘ 的形式实现该功能 二、这是我的小栗子 三、直接上代码，解释都在注释里 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="echarts.js的路径"></sc
数据可视化ECharts:定制柱状图bar
薛定谔的猫
11-01 1385
data: [ "旅游行业","教育培训", "游戏行业", "医疗行业", "电商行业", "社交行业", "金融行业" ],- 文本颜色设置为 rgba(255,255,255,.6) 字体大小为 12px。- 文本颜色设置为 rgba(255,255,255,.6) 字体大小为 12px。- Y 轴线条样式 更改为 1像素的 rgba(255,255,255,.1) 边框。- 分隔线的颜色修饰为 1像素的 rgba(255,255,255,.1)// x轴中更换data数据。
图像分类的划分数据，dataset和dataloader的实现 - demo
04-03
包含分类数据集的如何划分 图像分类的dataSet重写和dataloader的collate_fn
肌肉骨骼骨折数据集（4,083 张 X 射线图像）Fracture Classification Dataset
最新发布
03-07
肌肉骨骼骨折数据集（4,083 张 X 射线图像）Fracture Classification Dataset 该数据集是一个肌肉骨骼骨折数据集，带有用于肌肉骨骼X线片的分类、定位和分割等深度学习任务的注释。该数据集共包含 4,083 张 X 射线...
C#代码获取select的绑定值
心若动、泪千行
03-20 947
string userno = Request["listUser"]; //获取用户编号
jfreechart生成柱状图,x轴间隔显示
Mr丶Yang
06-07 4391
效果图: 开始时间和结束时间的间隔 Long timeLength = (simpleDateFormat.parse(endtime).getTime() - simpleDateFormat.parse(starttime).getTime())/(60*60*1000);//为生成柱状图添加数据 TimeTableXYDataset localTimeTableXYDataset = ...
echarts柱状图之数据过多时，实现横向拖动展示数据
魏知非的博客
10-23 2万+
在使用echarts柱状图时，如果数据过多，图的显示不会那么直观，有的横坐标会被隐藏，如下图所示： 想实现可以通过横向滚动条拖动展示数据，看了官方文档，实现的效果如下 具体代码：就是添加这个代码就可以了 dataZoom : [ { type: 'slider', show: true, ...
vue实现【echarts中 “12种” Bar柱状图图例】的组件封装及调用
weixin_50450473的博客
01-17 6815
1、安装echarts npm install echarts --save 2、在需要的页面引入 import * as echarts from "echarts" 3、创建组件personChart.vue <template> <div> <div id="person"></div> </div> </template> <script> import * as ..
Echarts —自定义label标签的样式(formatter，rich，添加图标等操作)
热门推荐
qq_38718629的博客
09-16 2万+
最近公司项目中在使用Echarts绘制图表时，由于默认的label标签不能满足设计稿需求，所以研究了对label标签进行格式化的方案，了解到可以使用formatter内容格式器对标签内容进行调整，formatter支持字符串模板和回调函数两种形式，下面以饼图为例对formatter格式化标签label标签遇到的情况记录如下。
echarts自定义柱状图和legend颜色 以及自定义legend形状
不积跬步何以至千里
08-03 1万+
echarts
Echarts横向柱状图如何设置dataset数据集
05-30
在 Echarts 中，横向柱状图可以通过设置 dataset 数据集来实现。具体步骤如下： 1.在 option 中设置 dataset： ``` option = { dataset: { source: [ ['product', '2015', '2016', '2017'], ['A', 43.3, 85.8, 93.7], ['B', 83.1, 73.4, 55.1], ['C', 86.4, 65.2, 82.5], ['D', 72.4, 53.9, 39.1] ] }, ... } ``` 以上代码中，`source` 数组中存储了数据，第一行为数据的标题，后面的行为数据。 2.在 series 中设置系列类型为 `bar`，并设置 `xAxisIndex` 和 `yAxisIndex`： ``` option = { ... series: [ { type: 'bar', xAxisIndex: 0, yAxisIndex: 0 } ] } ``` 以上代码中，`xAxisIndex` 和 `yAxisIndex` 分别表示横轴和纵轴的索引，由于是横向柱状图，因此横轴的索引为 0，纵轴的索引为 1。 3.在 xAxis 和 yAxis 中设置坐标轴类型为 `category` 和 `value`： ``` option = { ... xAxis: [ { type: 'value' } ], yAxis: [ { type: 'category', data: ['A', 'B', 'C', 'D'] } ] } ``` 以上代码中，`xAxis` 的类型为 `value`，表示横轴是数值轴；`yAxis` 的类型为 `category`，表示纵轴是类目轴，且设置了类目数据。 最终的代码如下： ``` option = { dataset: { source: [ ['product', '2015', '2016', '2017'], ['A', 43.3, 85.8, 93.7], ['B', 83.1, 73.4, 55.1], ['C', 86.4, 65.2, 82.5], ['D', 72.4, 53.9, 39.1] ] }, xAxis: [ { type: 'value' } ], yAxis: [ { type: 'category', data: ['A', 'B', 'C', 'D'] } ], series: [ { type: 'bar', xAxisIndex: 0, yAxisIndex: 0 } ] }; ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

龚建波

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值