数据可视化（Echart） ：柱状图、折线图、饼图等六种基本图表的特点及适用场合
数据可视化（Echart）
柱状图、折线图、饼图等六种基本图表的特点及适用场合
效果图
源码
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="js/echarts.min.js"></script>
</head> <body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div> <div id="main2" style="width: 600px;height:400px;left: 700px;top: 0px;position: absolute;"></div> <div id="main3" style="width: 600px;height:400px;left: 0px;top: 400px;position: absolute;"></div> <div id="main4" style="width: 600px;height:400px;left: 700px;top: 400px;position: absolute;"></div> <script type="text/javascript">
//模拟后台传来的json
var jsondata =
'{"sales":[{"name":"衬衫","num":"70"},{"name":"羊毛衫","num":"27"},{"name":"裤子","num":"36"},{"name":"高跟鞋","num":"18"},{"name":"袜子","num":"85"},{"name":"棉袄","num":"105"}]}';
var jsonobj = JSON.parse(jsondata); //获取json中的数值
var dataName = [];
var dataNum = [];
var temp = jsonobj; //匿名函数解析json串中的数值，关键点
(function() {
for(var i = 0; i < temp.sales.length; i++) {
dataName.push(temp.sales[i].name);
dataNum.push(temp.sales[i].num);
}
})(); // 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
var myChart2 = echarts.init(document.getElementById('main2')); //折线图
var option = {
title: {
text: '衣物销量统计'
},
tooltip: {},
legend: {
data: ['销量']
}, xAxis: {
//x轴字体颜色
/*axisLine: {
lineStyle: {
color: '#C50023'
}
},*/ data: dataName,
},
yAxis: [{
//定义y轴最大与最小值
min: 0,
max: 120,
type: 'value',
name: '日销量（万）',
splitNumber: 5
}], series: [{ //折线上数字
/* label: {
normal: {
show: true,
position: 'top',
formatter:100
}
},*/ // 折线颜色
/*itemStyle: {
normal: {
//线上。的颜色
color: '#33CCFF',
lineStyle: {
//线的颜色
color: '#33CCFF'
}
}
},*/ //顶上小图标名称
name: '销量',
type: 'line',
data: dataNum, //平均值
markLine: {
data: [{
type: 'average',
name: '平均值'
}]
}, }]
}; myChart.setOption(option); //柱状图
// 指定图表的配置项和数据
var option2 = {
title: {
text: '衣物销量统计'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: dataName,
},
yAxis: {
type: 'value',
name: '日销量（万）',
splitNumber: 5
},
series: [{
name: '销量',
type: 'bar',
//柱状宽度
barWidth: 20,
data: dataNum,
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart2.setOption(option2); //饼状图
echarts.init(document.getElementById('main3')).setOption({
title: {
text: '衣物销量统计',
subtext: '日销量（万）',
x: 'center',
//背景色
//backgroundColor:'rgba(12,121,123,0.1)'
},
series: [{
name: '详情',
type: 'pie', //饼状图的大小
//radius : '55%', center: ['50%', '60%'],
data: (function() { //饼状图需要函数解析数字内的值
var res = [];
var len = dataName.length;
while(len--) {
res.push({
name: dataName[len],
value: dataNum[len]
});
}
return res;
})()
}]
}) echarts.init(document.getElementById('main4')).setOption({
title: {
text: '衣物销量统计'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
yAxis: {
type: 'value',
name: '日销量（万）',
min: 0,
max: 4,
axisLabel: {
formatter: function(value) {
var texts = [];
if(value == 0) {
texts.push('woo');
} else if(value <= 1) {
texts.push('好');
} else if(value <= 2) {
texts.push('很好');
} else if(value <= 3) {
texts.push('非常好');
} else {
texts.push('完美');
}
return texts; }
}
},
series: [{
name: '销量',
type: 'bar',
//柱状宽度
//barWidth: 20,
data: [1, 4, 2, 3, 2, 0]
}]
})
</script>
</body>
</html>
数据可视化（Echart） ：柱状图、折线图、饼图等六种基本图表的特点及适用场合的更多相关文章
- C# 绘制统计图(柱状图, 折线图, 扇形图)【转载】
统计图形种类繁多, 有柱状图, 折线图, 扇形图等等, 而统计图形的绘制方法也有很多, 有Flash制作的统计图形, 有水晶报表生成统计图形, 有专门制图软件制作, 也有编程语言自己制作的:这里我们用 ...
- C# 绘制统计图(柱状图, 折线图, 扇形图)
统计图形种类繁多, 有柱状图, 折线图, 扇形图等等, 而统计图形的绘制方法也有很多, 有Flash制作的统计图形, 有水晶报表生成统计图形, 有专门制图软件制作, 也有编程语言自己制作的:这里我们用 ...
- Asp.net 用 Graphics 统计图(柱状图, 折线图, 扇形图)
统计图形种类繁多, 有柱状图, 折线图, 扇形图等等, 而统计图形的绘制方法也有很多, 有Flash制作的统计图形, 有水晶报表生成统计图形, 有专门制图软件制作, 也有编程语言自己制作的:这里我们用 ...
- Excel柱状图折线图组合怎么做 Excel百分比趋势图制作教程
Excel柱状图折线图组合怎么做 Excel百分比趋势图制作教程 用excel作图时候经常会碰到做柱状图和折线图组合,这样的图一般难在折线图的数据很小,是百分比趋势图,所以经常相对前面主数据太小了,在 ...
- Python图表数据可视化Seaborn：2. 分类数据可视化-分类散点图|分布图（箱型图|小提琴图|LV图表）|统计图（柱状图|折线图）
1. 分类数据可视化 - 分类散点图 stripplot( ) / swarmplot( ) sns.stripplot(x="day",y="total_bill&qu ...
- seaborn分类数据可视化：散点图|箱型图|小提琴图|lv图|柱状图|折线图
一.散点图stripplot( ) 与swarmplot() 1.分类散点图stripplot( ) 用法stripplot(x=None, y=None, hue=None, data=None, ...
- Python--matplotlib 绘图可视化练手--折线图/条形图
最近学习matplotlib绘图可视化,感觉知识点比较多,边学习边记录. 对于数据可视化,个人建议Jupyter Notebook. 1.首先导包,设置环境 import pandas as pd i ...
- ECharts动态获取后台传过来的json数据进行多个折线图的显示，折线的数据由后台传过来
ECharts 多个折线图动态获取json数据 效果图如下: 一.html部分 <p id="TwoLineChart" style="width:100%; he ...
- echarts在数据改变后，折线图并没有全部刷新
在做一个BI项目的时候,图表需要区分国内和国外显示.当前用户所属企业具备国内外权限的时候,展示两条图表,当查看其他企业需要根据选中的企业所具备的权限改变图表.即刚开始显示两条折线图,更改选择条件并重新 ...
随机推荐
- Webx.0-Web4.0：Web4.0
ylbtech-Webx.0-Web4.0:Web4.0 Web系统是人类迄今最伟大的发明之一,也是计算机影响人类最深远的表现. 1.返回顶部 1. Web系统是人类迄今最伟大的发明之一,也是计算机影 ...
- WebBrowser是IE内置的浏览器控件
WebBrowser是IE内置的浏览器控件.WebBrowser是IE内置的浏览器控件.WebBrowser是IE内置的浏览器控件.重要的事情说三遍,原因是一开始使用的时候就在这踩了坑. WebBro ...
- 32. 持续集成简介及JDK、Tomcat、Jenkins环境搭建
持续集成简介 持续集成是一种软件开发实践,即团队开发成员经常集成他们的工作,通常每个成员每天至少集成一次,也就意味着每天可能会发生多次集成.每次集成都通过自动化的构建(包括编译,发布,自动化测试)来验 ...
- LOJ #103. 子串查找 (Hash)
题意 给定两个字符串 \(A\) 和 \(B\),求 \(B\) 在 \(A\) 中的出现次数. 思路 这是一道 \(KMP\) 的模板题. 不过 \(Hash\) 是个好东西,可以用 \(Hash\ ...
- Java输入/输出教程
Java输入/输出(I/O)处理从源读取数据并将数据写入目标.通常,读取存储在文件中的数据或使用I/O将数据写入到文件中. java.io和java.nio包中包含处理输入/输出的Java类.java ...
- Error configuring application listener of class org.springframework.web.context.
1.java.lang.NoClassDefFoundError: org/objectweb/asm/ClassVisitor 缺少asm-3.3.jar 2.java.lang.NoClassDe ...
- python基础【第八篇】
day06笔记 1.小数据池 is 与 ==的区别 is :判断两边的内存地址是否相同 ==:判断两边的值是否相同 python中的驻留机制: 数字: -5 ~ 256 字符串: 3.6 乘法 ...
- CTU OPEN 2017 Pond Cascade /// 思维
题目大意: 给定N F 给定N个水池的大小 每个水池都以流量F开始注水 当位置较前的水池注满后 水会溢出到下一个水池 求 最后一个水池开始溢出的时间 和 所有水池全部注满的时间 1.最后一个n水池开始 ...
- zabbix--自带模板监控MySQL服务
zabbix有内置的模板,不过需要修改下配置,配置文件路径在: [root@localhost ~]# cd /etc/zabbix/ [root@localhost zabbix]# ls web ...
- Java面试宝典（1）Java基础部分
Java面试宝典 题目,日积月累,等到出去面试时,一切都水到渠成,面试时就自然会游刃有余了. 答题时,先答是什么,再答有什么作用和要注意什么(这部分最重要,展现自己的心得) 答案的段落分别,层次分明, ...