echarts3使用总结2

接着上一篇文章补充一点项目中遇到的问题及解决方法

1、y轴正负轴调换

yAxis: {

inverse: false, //y轴正负轴调换

2、去掉图表背景线

yAxis: [

{

type: 'value',

name: '占比',

splitLine:{

show:false //背景横线不显示

}

]

3、y轴以百分比显示

yAxis: [

{

type: 'value',

name: '占比',

axisLabel: {

formatter: '{value} %'

]

4、y轴刻度设置最小/最大值

　　yAxis : [

{

type : 'value',

minInterval: 1，

　　　　　　　　　　　　maxInterval:100

}

5、设置y轴刻度显示保留几位小数

yAxis: {

type: 'value',

axisLabel: {

formatter: '{value} ',

formatter: function (value, index) {

return value.toFixed(2); //保留两位小数

}

6、饼图文字在扇形内部显示

series : [

label: {

normal: {

position: 'inner'

}

]

下面贴几个最近做的echart的demo希望可以帮助到一些朋友

1、在图表中添加平行于y轴和x轴的线以及趋势线（如下图）

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><input type="text"><div id="pic0" style="width: 600px;height:400px;"></div><script src="js/echarts.js"></script><script>var myChart14 = echarts.init(document.getElementById('pic0'));option14 = {title: {text: '未来一周气温变化',subtext: '纯属虚构'},tooltip: {trigger: 'axis'},xAxis:  {type: 'category',boundaryGap: false,data: ['100','200','300','400','500','600','700']},yAxis: {type: 'value',axisLabel: {formatter: '{value} '}},series: [{name:'最高气温',type:'line',data:[100, 200, 300, 400, 500, 600, 700]},{            //平行于y轴
                    name:'',type:'line',markLine: {name:'盈亏临界点',symbol:'circle',lable:{normal:{show:true,position:'end',formatter:'盈亏临界点'}},data: [[{coord:['400',0],value:1},  //{coord:[4,0],value:1},//此处的4不加引号表示横坐标第几个从0开始
                            {coord:['400',350],value:400}//如何获取grid上侧最大值，目前是写死的
                        ]]}},{        //平行于x轴
                        name: '线',type: 'scatter',symbolSize: 20,markLine: {lable:{normal:{show:true,position:'end',formatter:'线'}},data: [{yAxis: 350,}]},data: [],},{name:'趋势线',type:'line',//data:[0],
                    markLine: {name:'aa1',data: [[{name: '标线1起点', value: 0, coord:['100',700]},{name: '标线1终点',value: 0, coord:['700',20]}]]}}]}; myChart14.setOption(option14);</script>
</body>
</html>

2、双y坐标带增量的柱状图+折线图（如下图)

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div id="pic4" style="width: 1000px;height:400px;"></div><script src="js/echarts.js"></script><script>var myChart = echarts.init(document.getElementById('pic4'));option = {title: {                    },tooltip: {trigger: 'axis'},legend: {data:['需方','供方','需方平均','供方平均','结算平均价差','我方申报均价','我方成交申报'],bottom:'bottom'},toolbox: {show: true,feature: {dataView: {readOnly: false},restore: {},saveAsImage: {}}},dataZoom: {show: false,start: 0,end: 100},toolbox:{show:false,},xAxis: [{type: 'category',boundaryGap: true,data: []},{type: 'category',boundaryGap: true,data:['需方','供方','需方平均','供方平均','结算平均价差','我方申报均价','我方成交申报'],}],yAxis: [{type: 'value',scale: true,boundaryGap: [0.2, 0.2]},{type: 'value',scale: true,boundaryGap: [0.2, 0.2]}],series: [{name: '辅助',type: 'bar',stack:  '总量',barWidth: '50%',itemStyle: {normal: {barBorderColor: 'rgba(0,0,0,0)',color: 'rgba(0,0,0,0)'},emphasis: {barBorderColor: 'rgba(0,0,0,0)',color: 'rgba(0,0,0,0)'}},data: [-12,-13,-14,-15,-16,-17,-18]},{name: '需方',type: 'bar',stack: '总量',color:['#ecc29c'],barWidth: '50%',data:[-11,-12,-13,-14,-15,-16,-17]},{name: '供方辅助',type: 'bar',stack:  '总量1',clickable : true,itemStyle: {normal: {barBorderColor: 'rgba(0,0,0,0)',color: 'rgba(0,0,0,0)'},emphasis: {barBorderColor: 'rgba(0,0,0,0)',color: 'rgba(0,0,0,0)'}},data: [-4,-5,-6,-7,-8,-9,-10]},{name:'供方',type:'bar',color:["#8fb3e7"],stack:  '总量1',xAxisIndex: 1,yAxisIndex: 1,data:[-5,-6,-7,-8,-9,-1,-11]},{name:'供方平均',type:'line',data:[-8,-11,-12,-13,-14,-15,-16]},{name:'结算平均价差',type:'line',data:[-8,-9,-11,-12,-13,-14,-45]}]};myChart.setOption(option);</script>
</body>
</html>

3、一个div中放多个饼图

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>#pic{width:100%;height:800px;}</style>
</head>
<body><div id="pic"></div><script src="js/echarts.js"></script><script>var mychart = echarts.init(document.getElementById('pic'))option = {title : {text: '',subtext: '',x:'center'},tooltip : {trigger: 'item',formatter: "{a} {b} :{d}%",textStyle: {fontSize:14}},legend: {orient: 'vertical',left: 'left',data: ['优秀','通过','建议修改']},toolbox: {show: true,orient: 'vertical',left: 'right',top: 'center',feature: {dataView: {readOnly: false},restore: {},saveAsImage: {}}},grid: [{x: '0%',y: '25%', width: '100%', height: '40%'},],xAxis: [{    type: 'category',axisTick: {alignWithLabel: true},axisLabel:{interval:0   //设置间隔，0的时候全部显示
                    },data: ['合同数量（个）','合同电量（万千瓦时）','合同总价（元）']},],yAxis: [{gridIndex: 0,name:'年级',show:false},],series : [{title:'aaa',name: '合同数量（个）',type: 'pie',//roseType:'radius',
                    radius : '33%',center: ['16.5%', '31%'],data:[{value:5, name:'优秀'},{value:32-5-14, name:'通过'},{value:14, name:'建议修改'}],label: {normal: {position: 'inner',formatter: '{c}份',textStyle: {color: '#ffffff',fontSize: 14}}},itemStyle: {emphasis: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}},{name: '合同电量（万千瓦时）',type: 'pie',radius : '33%',center: ['50%', '31%'],data:[{value:23, name:'优秀'},{value:46-23, name:'通过'},{value:13, name:'建议修改'},/*{value:335, name:'3'},{value:1548, name:'4'}*/],label: {normal: {position: 'inner',formatter: '{c}份',offset: [,100],textStyle: {color: '#ffffff',fontSize: 14}}},itemStyle: {emphasis: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}},{name: '合同总价（元）',type: 'pie',//roseType:'radius',
                    radius : '33%',center: ['83.5%', '31%'],data:[{value:0, name:'优秀'},{value:0, name:'通过'},{value:0, name:'建议修改'},],label: {normal: {position: 'inner',formatter: '{c}份',textStyle: {color: '#ffffff',fontSize: 14}}},itemStyle: {emphasis: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]};mychart.setOption(option);</script>
</body>
</html>

若有错误欢迎大家批评指正

上述内容是参照echarts官网http://echarts.baidu.com/,若有侵权请联系，谢谢！

作者：BlancheWang
出处：http://www.cnblogs.com/hhw3
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接。

转载于:https://www.cnblogs.com/hhw3/p/7365117.html

echarts3使用总结2相关推荐

flask+sqlite3+echarts3+ajax 异步数据加载
结构: /www | |-- /static |....|-- jquery-3.1.1.js |....|-- echarts.js(echarts3是单文件!!) | |-- /templates ...
在iview项目中添加echarts3
写在前面在即将结束的iview项目中,用到了大量的echarts3内容,简要记录下,在iview项目中,如何加载使用echarts3,并使其能够自适应页面大小. 开始页面模板中添加带 id 的 d ...
在echarts3中使用字符云
echarts2的官方API里是带有字符云的,但到了echarts3就被从官网上移除了,想要使用的话可以从github上下载: 下载地址:https://github.com/ecomfe/echar ...
使用echarts3实现散点地图
在开发过程中,我们总会接到关于数据处理分析的需求,其中有一部分很重要就是数据统计可视化展示,对于数据可视化方面,echarts这点就做的非常好.最近研究echarts,对于散点地图这一块挺感兴趣的,在 ...
flask+socketio+echarts3 服务器监控程序（基于后端数据推送）
本文地址:http://www.cnblogs.com/hhh5460/p/7397006.html 说明以前的那个例子的思路是后端监控数据存入数据库:前端ajax定时查询数据库. 这几天在看web ...
asp.net mvc5+Echarts3.0+AspNet.SignalR2.0 实时监控cpu占用率推送
先看看效果: 感谢QQ群18668853的群主,无私的公开课,全是干货,当初学的时候,群主用的是jquery.flot做图表,我这里改成百度的Echarts3.0,这算是自己的修改吧,喜欢的可以去下载 ...
echarts3实现世界地图
基于ecahrts 版本3 需要引入的文件有 echarts.js world.js 详见 world.js https://download.csdn.net/download/super__cod ...
Echarts3通过ajax动态获取数据，30秒定时图表数据,设置图表线条颜色和粗细
Echarts3通过ajax动态获取数据,30秒定时图表数据,设置图表线条颜色和粗细代码块 <!DOCTYPE html> <head><meta charset=&q ...
echarts3 实现中国地图
echarts3 实现中国地图 china.js下载地址(及各省市) https://download.csdn.net/download/super__code/10676410 效果图直接贴代码 ...
Echarts3 使用详解
因为项目需要,要求实现类似力导图效果的图,我就瞄上了echarts. 注意事项1:由于我的项目要部署到内网,所以js文件要在本地,网上大多力导图都是echarts2的,而其又依赖zrender基础库, ...

echarts3使用总结2

echarts3使用总结2相关推荐

最新文章

热门文章