Echars柱状图小结(两个柱状图及合并柱状图)
来源:互联网 发布:sub数学 知乎 编辑:程序博客网 时间:2024/05/01 05:23
"stack": 'sum',//如果不加该字段,则显示的是两个分离开来的柱状图
参考自百度框架API,
http://echarts.baidu.com/echarts2/doc/start.html
只需要这样更改即可,看出效果
series : [ { "name":"WHO", "type":"bar", "stack": 'sum',//如果不加该字段,则显示的是两个分离开来的柱状图 "data":[5, 20, 40, 10, 10, 20] }, {"data":[15, 120, 140,110, 110, 120] "name":"SHE", "type":"bar", "stack": 'sum',//如果不加该字段,则显示的是两个分离开来的柱状图 } ]
<!DOCTYPE html><head> <meta charset="utf-8"> <title>ECharts</title></head><body> <!-- 为ECharts准备一个具备大小(宽高)的Dom --> <div id="main" style="height:400px"></div> <!-- ECharts单文件引入 --> <script src="http://echarts.baidu.com/build/dist/echarts.js"></script> <script type="text/javascript"> // 路径配置 require.config({ paths: { echarts: 'http://echarts.baidu.com/build/dist' } }); </script></body>4、<script>标签内动态加载echarts和所需图表,回调函数中可以初始化图表并驱动图表的生成,option见API & Doc<!DOCTYPE html><head> <meta charset="utf-8"> <title>ECharts</title></head><body> <!-- 为ECharts准备一个具备大小(宽高)的Dom --> <div id="main" style="height:400px"></div> <!-- ECharts单文件引入 --> <script src="http://echarts.baidu.com/build/dist/echarts.js"></script> <script type="text/javascript"> // 路径配置 require.config({ paths: { echarts: 'http://echarts.baidu.com/build/dist' } }); // 使用 require( [ 'echarts', 'echarts/chart/bar' // 使用柱状图就加载bar模块,按需加载 ], function (ec) { // 基于准备好的dom,初始化echarts图表 var myChart = ec.init(document.getElementById('main')); var option = { tooltip: { show: true }, legend: { data:['销量'] }, xAxis : [ { type : 'category', data : ["A","B","C","D","E","F"] } ], yAxis : [ { type : 'value' } ], series : [ { "name":"销量", "type":"bar","stack":"sum", "data":[5, 20, 40, 10, 10, 20] },{ "name":"销量", "type":"bar","stack":"sum", "data":[25, 10, 20, 10, 10, 20] } ] }; // 为echarts对象加载数据 myChart.setOption(option); } ); </script></body>
0 0
- Echars柱状图小结(两个柱状图及合并柱状图)
- Echars 生成柱状图
- 柱状图
- 柱状图
- 柱状图
- 柱状图
- 柱状图
- 柱状图
- 柱状图
- 柱状图
- 柱状图
- 柱状图
- android helloCharts 柱状图小结
- FLEX叠加柱状图(分层柱状图)
- 图片显示投票两个柱状图
- 统计图分析(源自Echars图形)——柱状图(条形图)
- echars 自定义tooltip中显示格式和柱状图上(series)数据显示格式
- echars柱状图,折线图,和导出到Excel
- IntelliJ中的main函数和System.out.println()快捷键
- 对jsonArray数组存储的对象做自定义按多个值排序
- 排序函数
- c++类型转换
- [快速学会Swift第三方库] Cartography篇
- Echars柱状图小结(两个柱状图及合并柱状图)
- 小姿势--CSS
- MYSQL连接池应用场景
- keil(arm)中配置c99方法 及 C99特性
- 【49】java内部类剖析
- 最长递增子序列
- 动画库 Tweenmax 使用示例2 - 事件和状态
- c++实验6-数组合并
- 最长公共递增子序列