[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 ...
随机推荐
- Python print 中间换行 直接加‘\n’
- flask模板应用-消息闪现（flash()）
消息闪现 flask提供了一个非常有用的flash()函数,它可以用来“闪现”需要提示给用户的消息,比如当用户登录成功后显示“欢迎回来!”.在视图函数调用flash()函数,传入消息内容,flash( ...
- RPC框架小结
为什么说要搞定微服务架构,先搞定RPC框架? 1. 为什么说要搞定微服务架构,先搞定RPC框架? 如果没有统一的服务框架,RPC框架,各个团队的服务提供方就需要各自实现一套序列化.反序列化.网络框架. ...
- 使用Oracle数据库时的org.springframework.jdbc.BadSqlGrammarException:
org.springframework.jdbc.BadSqlGrammarException: ### Error querying database. Cause: java.sql.SQLExc ...
- Linux CentOS 7的图形界面安装（GNOME、KDE等）
转载于:https://jingyan.baidu.com/article/0964eca26fc3b38284f53642.html 今天为大家介绍一下CentOS 7的图像界面安装(虚拟机和硬盘安 ...
- How to Conduct High-Impact Research and Produce High-Quality Papers
How to Conduct High-Impact Research and Produce High-Quality Papers Contents From Slide Russell Grou ...
- Java利用JNI调用C/C++写成的DLL
前言 由于学期作业的要求,笔者需要开发一个语音识别系统.出于对Java的热爱,笔者非常想用Java来写上层程序(前台+数据库的三层),又要用到Microsoft Speech SDK,所以在这些条件下 ...
- 强大的shell(一键redis，mysql，php，openresty，jdk)
前序 集成了一键安装离线包redis,mysql,php,openresty,jdk,系统优化等脚本, 一个shell搞掂. JDK:自动识别本地安装包,自动解压,部署,配置环境变量. REDIS:自 ...
- Linux使用退格键时出现^H + Tab键命令补全失效/方向键失效 + ls文件夹和文件没有颜色
删除问题 安装kalilinux使用普通用户的的时候按退格键无法实现删除功能 解决的办法有两个 一改变快捷键: 使用Ctrl+Backspace组合键可以实现删除功能 ctrl + backspace ...
- 20145208 蔡野 《网络对抗》Exp7 网络欺诈技术防范
20145208 蔡野 <网络对抗>Exp7 网络欺诈技术防范 本实践的目标理解常用网络欺诈背后的原理,以提高防范意识,并提出具体防范方法.具体有(1)简单应用SET工具建立冒名网站(2) ...