[echarts] - echarts量化比较图表类型解析
https://echarts.baidu.com/examples/editor.html?c=watermark
<!DOCTYPE html>
<!--用作两种货品的参数对比-->
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div> <script src="/js/jquery.min.js"></script> <!--<script src="/js/jquery-3.1.0.min.js"></script>--> <!--<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>-->
<!--<script src="/js/echarts_4.1.0.rc2_echarts.min.js"></script>-->
<script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts.min.js"></script> <!--<script src="monitor.js"></script>-->
<script src="/js/getParam.js"></script> <script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
app.title = '水印 - ECharts 下载统计' //TODO 测试echart数据
// $.ajax({
// url: "/petroleumCoke/selectAll", //获取所有石油焦数据list
// type: "POST",
// success: function (data) {
//
// companys = getParamValues("company",data).delDuplicate();
// }
// }); var builderJson = {//json数组
"all": 10887,
"charts": {
"map": 3237,
"lines": 2164,
"bar": 7561,
"line": 7778,
"pie": 7355,
"scatter": 2405,
"candlestick": 1842,
"radar": 2090,
"heatmap": 1762,
"treemap": 1593,
"graph": 2060,
"boxplot": 1537,
"parallel": 1908,
"gauge": 2107,
"funnel": 1692,
"sankey": 1568
},
"components": {
"geo": 2788,
"title": 9575,
"legend": 9400,
"tooltip": 9466,
"grid": 9266,
"markPoint": 3419,
"markLine": 2984,
"timeline": 2739,
"dataZoom": 2744,
"visualMap": 2466,
"toolbox": 3034,
"polar": 1945
},
"ie": 9743
}; var downloadJson = {
"echarts.min.js": 17365,
"echarts.simple.min.js": 4079,
"echarts.common.min.js": 6929,
"echarts.js": 14890
}; var themeJson = {
"dark.js": 1594,
"infographic.js": 925,
"shine.js": 1608,
"roma.js": 721,
"macarons.js": 2179,
"vintage.js": 1982
}; var waterMarkText = 'ECHARTS'; var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width = canvas.height = 100;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.globalAlpha = 0.08;
ctx.font = '20px Microsoft Yahei';
ctx.translate(50, 50);
ctx.rotate(-Math.PI / 4);
ctx.fillText(waterMarkText, 0, 0); option = {
backgroundColor: {
type: 'pattern',
image: canvas,
repeat: 'repeat'
},
tooltip: {},
title: [{
text: '在线构建',
subtext: '总计 ' + builderJson.all,
x: '25%',
textAlign: 'center'
}, {
text: '各版本下载',
subtext: '总计 ' + Object.keys(downloadJson).reduce(function (all, key) {
return all + downloadJson[key];
}, 0),
x: '75%',
textAlign: 'center'
}, {
text: '主题下载',
subtext: '总计 ' + Object.keys(themeJson).reduce(function (all, key) {
return all + themeJson[key];
}, 0),
x: '75%',
y: '50%',
textAlign: 'center'
}],
grid: [{
top: 50,
width: '50%',
bottom: '45%',
left: 10,
containLabel: true
}, {
top: '55%',
width: '50%',
bottom: 0,
left: 10,
containLabel: true
}],
xAxis: [{
type: 'value',
max: builderJson.all,
splitLine: {
show: false
}
}, {
type: 'value',
max: builderJson.all,
gridIndex: 1,
splitLine: {
show: false
}
}],
yAxis: [{
type: 'category',
data: Object.keys(builderJson.charts),
axisLabel: {
interval: 0,
rotate: 30
},
splitLine: {
show: false
}
}, {
gridIndex: 1,
type: 'category',
data: Object.keys(builderJson.components),
axisLabel: {
interval: 0,
rotate: 30
},
splitLine: {
show: false
}
}],
series: [{
type: 'bar',
stack: 'chart',
z: 3,
label: {
normal: {
position: 'right',
show: true
}
},
data: Object.keys(builderJson.charts).map(function (key) {
return builderJson.charts[key];
})
}, {
type: 'bar',
stack: 'chart',
silent: true,
itemStyle: {
normal: {
color: '#eee'
}
},
data: Object.keys(builderJson.charts).map(function (key) {
return builderJson.all - builderJson.charts[key];
})
}, {
type: 'bar',
stack: 'component',
xAxisIndex: 1,
yAxisIndex: 1,
z: 3,
label: {
normal: {
position: 'right',
show: true
}
},
data: Object.keys(builderJson.components).map(function (key) {
return builderJson.components[key];
})
}, {
type: 'bar',
stack: 'component',
silent: true,
xAxisIndex: 1,
yAxisIndex: 1,
itemStyle: {
normal: {
color: '#eee'
}
},
data: Object.keys(builderJson.components).map(function (key) {
return builderJson.all - builderJson.components[key];
})
}, {
type: 'pie',
radius: [0, '30%'],
center: ['75%', '25%'],
data: Object.keys(downloadJson).map(function (key) {
return {
name: key.replace('.js', ''),
value: downloadJson[key]
}
})
}, {
type: 'pie',
radius: [0, '30%'],
center: ['75%', '75%'],
data: Object.keys(themeJson).map(function (key) {
return {
name: key.replace('.js', ''),
value: themeJson[key]
}
})
}]
};
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>
</body>
</html>
这个图表展示类型是横条装及饼图,能很明显地展示出两种产品的产量,供应量,销售量(横线)以及饼图(构成饼图,比如一个吃的食品各种佐料,添加剂各占了多少)
在var builderJson = { } 中创建的key,value键值对数据数组完全可以通过一个js进行数据的转换.
如:
var builderJson = getBuilderJson(company1,company2,json);
todo: getBuilderJson
[echarts] - echarts量化比较图表类型解析的更多相关文章
- Echarts图表类型
每个系列通过 type 决定自己的图表类型: type: 'bar':柱状/条形图 type: 'line':折线/面积图 type: 'pie':饼图 type: 'scatter':散点(气泡)图 ...
- echarts的时间线图表
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script sr ...
- echarts入门，5分钟上手写ECharts的第一个图表
1.新建一个echarts.html文件,为ECharts准备一个具备大小(宽高)的Dom. <!DOCTYPE html> <head> <meta charset=& ...
- vue和echarts 封装的 v-charts 图表组件
https://v-charts.js.org/#/ 在使用 echarts 生成图表时,经常需要做繁琐的数据类型转化.修改复杂的配置项,v-charts 的出现正是为了解决这个痛点.基于 Vue2. ...
- ECharts学习总结(一):ECharts的第一个图表
在进行echarts图表开发之前先要到echarts官网下载echarts的库文件,我下载的是echarts-2.2.7.然后把库文件放到工程文件web目录下.接下来进行第一个图表的显示步骤如下: 1 ...
- echarts.js中的图表大小自适应
echarts的图表,如果父级容器的height/width属性设置为百分比的形式,那么echarts就会warning,且不能正常的生成图表.所以div容器的高度宽度必须指定为px,这设计不知道是为 ...
- echarts 双Y轴图表
直接代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- 在vue中引入版本为"echarts": "^5.1.2"图表
1. npm install echarts --save 2. 在main.js文件中 import echarts from 'echarts' Vue.prototype.$echarts = ...
- [ECharts]"echarts/config" is not exists
今天在给Echarts折线图中的数据点增加点击事件的时候总是出现一个 Uncaught Error: [MODULE_MISS]"echarts/config" is not ex ...
随机推荐
- 委托、匿名函数到lambda表达式
在C#2.0之前就有委托了,在2.0之后又引入了匿名方法,C#3.0之后,又引入了Lambda表达式,他们三者之间的顺序是:委托->匿名表达式->Lambda表达式,微软的一步步升级,带给 ...
- watch解放你的双手
有时候我们需要重复执行某个命令,观察某个文件和某个结果的变化情况.可以写脚本去实现这些需求,但是有更简单的方法,本文档要介绍的就是watch命令. 1. 以固定时间反复执行某个命令 root@jaki ...
- js call 和 apply方法记录
最近看到一篇很好的讲解apply和call的文章转了过来,若涉及版权问题请联系本人删除 1. 每个函数都包含两个非继承而来的方法:call()方法和apply()方法. 2. 相同点:这两个方法的作用 ...
- weblogic11,linux字符页面安装
1. 安装前 1 确定weblogic版本被认证 首先请确认您要安装的Weblogic版本所在的平台已通过了BEA的认证,完整的认证平台列表请参考http://e-docs.bea.com/wls ...
- shell IFS
在bash中IFS是内部的域分隔符,manual中对其的叙述如下:IFS The Internal Field Separator that is used for word splitting af ...
- oracle之存储过程和存储函数的使用和区别
#存储过程:封装在服务器上一段sql片段,已经编译好了的代码. 1.客户端调存储过程,执行效率就会非常高效. 语法: create [or replace] procedure 存储过程名称 (参数名 ...
- MySQL半同步安装以及参数
MySQL半同步安装以及参数 基于MySQL5.5 官档地址: Semisynchronous Replication Administrative Interface https://dev.mys ...
- keepalived与zookeeper
keepalived与zookeeper都可以用来实现高可用,高可用一般跟负载均衡会一起考虑,所以通常也会考虑到相应的负载均衡能力, 1.概括对比: 1.1.Keepalived: 优点:简单,基本不 ...
- oracle /*+ SYS_DL_CURSOR */ 这个hint
之前一直都没使用过 /*+ SYS_DL_CURSOR */这个提示,今天下午在排查一个性能问题的时候,发现出问题的session在执行一个带了SYS_DL_CURSOR提示的语句,类似于: 经查这个 ...
- rabbitmq集群安装与配置（故障恢复）
0.首先按照http://www.cnblogs.com/zhjh256/p/5922562.html在至少两个节点安装好(不建议单机,没什么意义) 1.先了解rabbitmq集群架构,http:// ...