【echarts】修改柱状图颜色
2017-04-06 17:05
246 查看
创建一个柱状图对象
<div id="barGragh" style="width: 100%;height:400px;margin-bottom: 5px"> </div>
js设置树形
//柱状图 var barGragh = document.getElementById('barGragh'); var barChart = echarts.init(barGragh); var barChartoption = { tooltip: { trigger: 'axis' }, legend: { data: ['上周同比', '今日整点'], /* y : 'bottom' */ }, toolbox: { show: false, feature: { mark: {show: true}, dataView: {show: true, readOnly: false}, magicType: {show: true, type: ['line', 'bar']}, restore: {show: true}, saveAsImage: {show: true} } }, color : ['#ff7f50','#87cefa', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'], calculable: true, grid: { left: '0%', right: '0%', bottom: '15%', containLabel: true }, xAxis: [ { type: 'category', axisLabel:{ interval:0, rotate:30, margin:15, textStyle:{ color:"#222" } }, data: [] } ], yAxis: [ { type: 'value', name: 'GMV' } ], series: [ { name: '上周同比', type: 'bar', barMaxWidth: '100', data: [], markPoint: { itemStyle: { normal: { label: { show: true, formatter: "{b}\n¥{c}", textStyle: { color: '#000' } }, textColor : '#000' }, emphasis: { label: { show: true } } }, data: [ {type: 'max', name: '上周最大值',}, {type: 'min', name: '上周最小值'} ] }, markLine: { data: [ {type: 'average', name: '平均值'} ] } }, { name: '今日整点', type: 'bar', barMaxWidth: '100', data: [], markPoint: { itemStyle: { normal: { label: { show: true, formatter: "{b}\n{c}", textStyle: { color: '#000' } }, textColor : '#000' }, emphasis: { label: { show: true } } }, data: [ {type: 'max', name: '今日最大值'}, {type: 'min', name: '今日最小值'} ] }, markLine: { data: [ {type: 'average', name: '平均值'} ] } } ] }; barChart.setOption(barChartoption);
相关文章推荐
- Echarts学习 堆叠柱状图 柱子样式颜色及透明度宽度间隔修改
- echarts 柱状图 ,颜色和显示设置并设置折线的颜色
- echarts柱状图颜色渐变
- echarts柱状图不同颜色与显示数值
- Echarts学习记录——如何修改x轴和y轴的颜色
- echarts 柱状图坐标轴颜色
- echarts折线图柱状图的坐标轴的颜色及样式的设置
- Echarts(一)一组不同颜色的柱状图
- Echarts柱状图,改变柱子的颜色,后台操作
- echarts-折线图(折线虚实/颜色与拐点样式修改)
- echarts柱状图,改变柱状颜色
- Echarts 柱状图颜色控制
- 为echarts的叠加柱状图设置颜色
- 【Android开发日记】AndroidCharts 柱状图 BarView修改:添加数值和颜色
- echarts柱状图,改变柱状颜色
- echarts 使用不同颜色区分柱状图的值
- echart 折线图、柱状图、饼图、环形图颜色修改
- echarts 修改图例legend颜色
- echarts 无数据时气泡的修改 背景颜色/动画样式 noDataLoadingOption
- echarts折线图柱状图的坐标轴的颜色及样式的设置