双Y轴分两侧显示及点击事件
来源:互联网 发布:c语言api帮助文档下载 编辑:程序博客网 时间:2024/04/30 22:46
想要两个Y轴坐标分两侧显示,需要将第二个series的yAxisIndex设置为大于0的数,因为以0为起点
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>ECharts</title> <script src="echarts.min.js"></script></head><body> <!-- 为ECharts准备一个具备大小(宽高)的Dom --> <center><div id="main" style="width: 600px;height:400px;"/></center> <script type="text/javascript"> // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { title: { text: '双坐标轴事例', //标题 show:true //是否显示标题 }, tooltip: { // 气泡 trigger: 'axis', formatter:'{b}<br/>{a0}:{c0}件<br/>{a1}:{c1}%', //b为数据名;a0,a1为系列名,c0为y轴左侧数据,c1为右侧 axisPointer : { // 坐标轴指示器,坐标轴触发有效 type : 'shadow' // 默认为直线,可选为:'line' | 'shadow' } }, legend: { //图例 data:['销量','增长率'] }, xAxis: { type : 'category', data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: [ { type : 'value', name : '销量', axisLabel : { formatter: '{value} 件' } }, { type : 'value', name : '增长率', axisLabel : { formatter: '{value} %' } }], series: [ { name: '销量', type: 'bar', //柱状图 data: [5, 20, 36, 10, 10, 20] }, { name: '增长率', type: 'line', //线形图 yAxisIndex:'1', //使坐标轴在右侧显示,当有多个坐标轴时,数字依次增大,可建立多个Y轴 data: [0, 300, 80, -72, 0, 100] } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); myChart.on('click', function (params) { alert( '我是系列序号:params.seriesIndex'+params.seriesIndex+'\n'+ '我是数值序列:params.dataIndex'+params.dataIndex+'\n'+ '我是图例:params.seriesName'+params.seriesName+'\n'+ '我是X轴:params.name'+params.name+'\n'+ '我是Y轴:params.data'+params.data+'\n'+ '我是Y轴值:params.value'+params.value ); }); </script></body></html>
0 0
- 双Y轴分两侧显示及点击事件
- mpchart 如何对y轴取整及对y轴上对应显示的数据取整数
- JQuery中区分模拟点击事件和用户点击事件
- HighChar 详解-双Y轴-及各
- 点击事件获取鼠标坐标位置(x,y)值
- 用mschart 终于实现了鼠标事件,显示X轴和Y轴数据
- DunDas对应不同坐标系显示双y轴
- android点击两侧返回键退出应用
- unity 点击事件及发布
- 富文本添加颜色大小及点击事件,防止最后一句断行显示。
- iOS UILabel网址识别添加点击事件及以富文本形式显示
- 《鼠标点击【onclick】事件及Div的显示与隐藏制作站内分类栏》
- highchart图表drilldown钻取功能及event点击事件添加--补充钻取多图显示(2)
- echart X,Y轴内容显示不全问题(echart修改图表其大小及位置)
- RecyclerView的分割线+回调接口的点击事件(点击事件+长按的点击事件)
- JQUERY显示隐藏的点击绑定事件
- 必应地图显示点击事件经纬度
- EChars显示labelLine;添加点击事件
- 责任链模式和状态模式的区别
- poj 1308 Is It A Tree? (并查集)
- EasyJWeb-Velocity脚本简明教程
- The Blocks Problem (积木问题) -Uva101
- Python基础
- 双Y轴分两侧显示及点击事件
- 【书山有路】代码大全第二版 第1章
- 三个事和三个问题:关于对待工作的态度和价值问题
- BFS走迷宫
- [BZOJ4407]于神之怒加强版(莫比乌斯反演)
- [Azure]使用CustomScriptExtension在Azure虚拟机中执行自定义脚本
- Velocity语法使用总结
- 1062
- Yii2 关于电子商务的开源项目