总结下这几日用echarts库作基本图形遇到的一些问题。

echarts快速上手可参考官网:

http://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts

在作柱形图时,如果需要给每个柱子设置不同颜色,参考以下说明:

var option = {
xAxis: {
data: ["苹果","小米","华为","其他"]
},
yAxis: {
splitLine:{ show:false} //改设置不显示坐标区域内的y轴分割线
},
series: [{
name: '手机品牌',
type: 'bar',
data: [19, 15, 40, 32],
//设置柱子的宽度
barWidth : 30,
//配置样式
itemStyle: {
//通常情况下:
normal:{
            //每个柱子的颜色即为colorList数组里的每一项,如果柱子数目多于colorList的长度,则柱子颜色循环使用该数组
color: function (params){
var colorList = ['rgb(164,205,238)','rgb(42,170,227)','rgb(25,46,94)','rgb(195,229,235)'];
return colorList[params.dataIndex];
}
},
//鼠标悬停时:
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
}],
     //控制边距 
grid: {
left: '0%',
right:'10%',
containLabel: true,
},
};

echarts如何给柱形图的每个柱子设置不同颜色的更多相关文章

  1. echarts图表x,y轴的设置

    https://www.cnblogs.com/cjh-strive/p/11065005.html xAxis属性代表echarts图表的x轴设置代码如下 xAxis : [ { type : 'c ...

  2. highcharts设置Y轴范围及根据Y轴范围设置不同颜色

    yAxis : { title : { text : '数据' }, plotLines : [ { value : 0, width : 1, color : '#808080' } ], min: ...

  3. ECharts图表实战经验1:如何设置图表同序列不同数据点的独立颜色值

    最近有不少朋友在追问这样一个问题:我单序列的柱状图,我想让每一个根柱子的颜色都不一样,应该如何做? 针对这个问题,其实我只想说你压根没有认真看完或者查找ECharts官方的示例,官方能够找到的示例有: ...

  4. echarts tree 树型图层级距离设置

    网上找了半天,没有找到设置层级距离的属性,默认是自动适应的,无奈只能改源码,分享出来希望可以帮到有相同需求的... 上github下载echarts源码包,打开src=>chart=>tr ...

  5. PHP Echarts Ajax Json柱形图示例

    <?php $server = '127.0.0.1'; $user = 'root'; $password = ''; $database = 'yiibaidb'; $conn = new ...

  6. echarts 表格与 div 之间 空白的设置

    一. options 图表选项,包含图表实例任何可配置选项: 公共选项 , 组件选项 , 数据选项 {Object} grid 二. grid 直角坐标系内绘图网格 名称 默认值 描述 {number ...

  7. echarts爬坑 : 怎么Line折线图设置symbol:none后Label不见了?

    用 echarts 时遇到了一个奇奇怪怪的问题. 这是一张折线图. 本来这个图是有数字显示的. series : [ { name:'搜索引擎', type:'line', stack: '总量', ...

  8. echarts柱状图每个柱子显示不同颜色,并且能够实现点击每种颜色影藏对应柱子的功能

    ---------------------------------------------------------代码区---------------------------------------- ...

  9. echarts绘制饼图时的一点特殊设置

    最后的效果如图,需要在中间展示的部分换行然后字体大小不同. 以下为option的设置,使用rich里面的参数来设置更多的文本样式,使用‘\n’来控制换行 let option = { color: c ...

随机推荐

  1. DNS_PROBE_FINISHED_NXDOMAIN & MacOS

    DNS_PROBE_FINISHED_NXDOMAIN 内网 DNS bug 8.8.8.8 8.8.4.4 # new inner Wi-Fi 10.1.3.10 10.1.3.13 Windows ...

  2. 错误模块名称: KERNELBASE.dll错误

    今天在部署一个C/S程序的时候出了bug,日志都没有记载:本地调试当然是没问题的,所以不是代码问题,百度之发现KERNELBASE.dll这个文章说的比较靠谱,仔细研究了自己的配置文件后,果然是配置文 ...

  3. mvc 按钮权限控制

    需要开发一个按钮权限的控制,思路:拦截所有按钮路径,和用户拥有的3级按钮权限对比, 所有验证都一个方法解决,只需要修改js后的参数,参数就是按钮对应的权限码 如果有什么问题请提醒,谢谢! xml: & ...

  4. cefSharp 开发随笔

    最近用cefSharp开发一点简单的东西.记录一点随笔,不定时更新. 1.用nuget安装完之后,架构要选择x86或者x64,否则编译会报错(截止到Chrome 55版本) 2.向Chrome注册C# ...

  5. Nginx 针对上游服务器缓存

    L:99 nginx缓存 : 定义存放缓存的载体 proxy_cache 指令 Syntax: proxy_cache zone | off; Default: proxy_cache off; Co ...

  6. JarvisOJ Basic easyRSA

    还记得veryeasy RSA吗?是不是不难?那继续来看看这题吧,这题也不难. 已知一段RSA加密的信息为:0xdc2eeeb2782c且已知加密所用的公钥: (N=322831561921859 e ...

  7. Paths on a Grid POJ - 1942 组合数学 (组合数的快速计算)

    题意:格路问题 没什么难度 难点在于如何快速计算相对较大的组合数 思路:运用手写计算组合数的方式进行计算  如c(8,3) 如果手算就是   8*7*6/(3*2*1)这样可以很快得解出 计算代码为: ...

  8. 个人整理的数组splay板子,指针的写的太丑了就不放了。。

    splay的板子.. 由于被LCT榨干了..所以昨天去学了数组版的splay,现在整理一下板子.. 以BZOJ3224和3223为例题..暂时只有这些,序列的话等有时间把维修序列给弄上来!! BZOJ ...

  9. BZOJ 4196 软件包管理器

    树链剖分 建树之后,安装软件就是让跟节点到安装的节点路径所有点权+1,卸载软件就是让一个节点和他的子数-1 要求变化数量的话直接求和相减就行啦(绝对值) 注意一点,一开始的lazyatag应该是-1, ...

  10. HAOI2017 简要题解

    「HAOI2017」新型城市化 题意 有一个 \(n\) 个点的无向图,其中只有 \(m\) 对点之间没有连边,保证这张图可以被分为至多两个团. 对于 \(m\) 对未连边的点对,判断有哪些点对满足将 ...