总结下这几日用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. python numpy笔记(重要)

    1.np.array 的shape (2,)与(2,1)含义 ndarray.shape:数组的维度.为一个表示数组在每个维度上大小的整数元组.例如二维数组中,表示数组的“行数”和“列数”. ndar ...

  2. Lodop打印控件不打印css背景图怎么办

    background:url()这是css背景图,http协议会按异步方式下载背景图,所以很容易等不到下载完毕就开始打印了,故lodop不打印css背景图.Lodop不打印css背景图,但是有其他方法 ...

  3. caffemodel模型

    resnet18 https://github.com/HolmesShuan/ResNet-18-Caffemodel-on-ImageNet

  4. iOS 通知推送APNS

    结合网上各个资料,再简单整理的一份. 一.APNS推送说明 1.你的IOS应用需要去注册APNS消息推送功能. 2.当苹果APNS推送服收到来自你应用的注册消息就会返回一串device token给你 ...

  5. git使用常见问题

    1.git branch使用,创建新的分之后做修改后,其他分支也被同步修改 问题: 原项目在 master 分支,执行下面的操作:  git branch test  git checkout tes ...

  6. table-layui

    本文章为原创文章,转载请注明出处 html <div class="layui-btn-group tableBtn"> <button class=" ...

  7. HUST 1541 解方程

    参考自:https://www.cnblogs.com/ECJTUACM-873284962/p/6394836.html 1541 - Student’s question 时间限制:1秒 内存限制 ...

  8. 一个服务器创建两个MySQL

    转载:http://www.2cto.com/database/201412/357863.html 将已安装的数据库文件夹复制到另一个目录下 打开复制目录下的my.ini文件修改 [client] ...

  9. 「2017 Multi-University Training Contest 1」2017多校训练1

    1001 Add More Zero(签到题) 题目链接 HDU6033 Add More Zero 找出最大的k,使得\(2^m-1\ge 10^k\). 直接取log,-1可以忽略不计. #inc ...

  10. 洛谷P1829 [国家集训队]Crash的数字表格

    题目描述 今天的数学课上,Crash小朋友学习了最小公倍数(Least Common Multiple).对于两个正整数a和b,LCM(a, b)表示能同时整除a和b的最小正整数.例如,LCM(6, ...