[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 ...
随机推荐
- Qt Md5应用示例
[1].cpp文件 #include "widget.h" #include "ui_widget.h" #include <QCryptographic ...
- Linux基础命令---文本格式转换expand，unexpand
expand 将文件中的tab转换成空格,结果送到标准输出.如果没有指定文件,那么从标准输入读取. 此命令的适用范围:RedHat.RHEL.Ubuntu.CentOS.SUSE.openSUSE.F ...
- 阿里巴巴json fastjson String转javaBean
private Entity getEntity(String resp){ JSONObject jsonObj = (JSONObject) JSON.parse(resp); ...
- AtCoder Beginner Contest 082 A - Round Up the Mean
题目链接:https://abc082.contest.atcoder.jp/tasks/abc082_a Time limit : 2sec / Memory limit : 256MB Score ...
- vue 加载更多
<template> <div> <ul> <li v-for="item in articles"> ...
- springmvc请求路径和请求参数的获取注解- @PathVariable和@RequestParam
@PathVariable和@RequestParam @PathVariable是从路径里面去获取变量,也就是把路径当做变量. @RequestParam是从请求里面获取参数. 如:url:http ...
- Spring Advice
Spring AOP(面向方面编程)框架,用于在模块化方面的横切关注点.简单得说,它只是一个拦截器拦截一些过程,例如,当一个方法执行,Spring AOP 可以劫持一个执行的方法,在方法执行之前或之后 ...
- Python笔记 #20# SOM
SOM(自组织映射神经网络)是一种可以根据输入对象的特征自动进行分类(聚类)的神经网络.向该网络输入任意维度的向量都会得到一个二维图像, 不同特征的输入会被映射到二维图像的不同地方(所以SOM也可以用 ...
- django模板-通过a标签生成链接并跳转
views.py from django.shortcuts import render from django.http import HttpResponse def index(request) ...
- c语言cgi笔记
直接输出接收的数据 #include <stdio.h>#include <stdlib.h>main(){int i,n;printf ("Content-type ...