echarts如何在每个柱状图上都显示气泡详解(好看的柱状图)
2017-12-14 19:54
555 查看
markPoint: 图表标注 ,如下图,详见官方http://echarts.baidu.com/option.html#series-bar.markPoint
![](https://oscdn.geek-share.com/Uploads/Images/Content/201712/14/b0161486de2cd09fb4a233a3d7cc6501)
效果图
<script> var myChart = echarts.init(document.getElementById('salesVolume')); option = { title : { text: '近七天销售量(单位:万元)', textStyle:{ color:'#75fcd7', fontSize: 20, fontWeight: 'normal', align: 'left', fontFamily:"微软雅黑" } }, grid:{ // top:40, x:50, // y:20, bottom:20, borderWidth:80 },//柱状图的大小 tooltip : { trigger: 'axis', axisPointer : { // 坐标轴指示器,坐标轴触发有效 type : 'shadow' // 默认为直线,可选为:'line' | 'shadow' } }, legend: { data:['近七天销售量(单位:万元)'] }, xAxis : [ { axisTick:{ show:false //刻度消失 }, splitLine:{show: false}, type : 'category', axisLabel: { show: true, textStyle: { color: '#fff' } }, axisLine: { show: true, lineStyle: { color:'#7192ca', width:2 } }, data : ['11-15','11-16','11-17','11-18','11-19','11-20','11-21'] }, ], yAxis : [ { axisTick:{ show:false //刻度消失 }, splitLine:{show: false},//去除网格线 type : 'value', nameTextStyle:{ color:'#fff' }, axisLabel : { formatter: '{value}', textStyle: { color: '#fff', // fontSize:16 } }, axisLine: { show: true, lineStyle: { color:'#7192ca', width:2 } }, } ], series : [ { name:'销售量', type:'bar', barWidth : 30, itemStyle: { emphasis: { barBorderRadius: [10, 10, 10, 10] },//圆角 normal: { color: function(params) { // build a color map as your need. be47 var colorList = ['#ec635a','#ed719e','#c36ff6','#736af6','#7993f7','#86d4fb','#91fce7']; return colorList[params.dataIndex] //柱状图的颜色 } } }, data:[5, 10, 15, 20, 25, 30, 50], markPoint : { symbol:'pin',//标记类型 symbolSize: 40,//图形大小 itemStyle: { normal: { borderColor: '#fff', borderWidth: 1, // 标注边线线宽,单位px,默认为1 label: { show: true } } }, data : [//配置项 {value:'5',xAxis: 0, yAxis: 5}, {value:'10',xAxis:1, yAxis: 10}, {value:'15',xAxis:2, yAxis: 15}, {value:'20',xAxis:3, yAxis: 20}, {value:'25',xAxis:4, yAxis: 25}, {value:'30',xAxis:5, yAxis: 30}, {value:'50',xAxis:6, yAxis: 50}, ] }, }, ] }; myChart.setOption(option); window.onresize = function(){ myChart.resize(); }//组件随着页面的缩放而缩放 </script>
效果图
相关文章推荐
- echarts柱状图每个柱子显示不同颜色,并且能够实现点击每种颜色影藏对应柱子的功能
- echarts如何让折线图的每个折点都显示数值?
- Echarts柱状图的每个柱子显示不同颜色问题
- 介绍一篇“让echarts柱状图的每个柱子显示不同的颜色”的好博客
- echarts柱状图显示数值
- 客户管理系统里的每个模块该如何显示?
- Highcharts做柱状图怎样样每个柱子都是不同的颜色显示
- echarts 柱状图头部显示头像
- 开源PLM软件Aras详解五 如何让ItemType显示在TOC上
- jquery 的柱状图,饼状图如何显示
- echarts柱状图虚线显示
- 关于echarts没有数据是气泡的显示修改等
- 百度echarts 在柱状图 折线图 饼图上 显示y轴对应的数据 以及 图形是否能够拖动的设置
- 如何在vue脚手架里面使用echarts 组件显示中国地图---亲测
- 客户管理系统里的每个模块该如何显示?
- 再论百度Echarts技术,如何从后台获取数据并显示在页面上
- echarts 实现柱状图左右横向显示
- ECharts3.0如何给X轴中显示的文字添加点击事件!
- echarts如何给柱形图的每个柱子设置不同颜色
- ftpwho命令_Linux ftpwho 命令用法详解:显示当前每个ftp会话信息