数据可视化（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项目的时候,图表需要区分国内和国外显示.当前用户所属企业具备国内外权限的时候,展示两条图表,当查看其他企业需要根据选中的企业所具备的权限改变图表.即刚开始显示两条折线图,更改选择条件并重新 ...
随机推荐
- [CSP-S模拟测试62]题解
A.Graph 因为点可以随便走,所以对于每个联通块,答案为边数/2向下取整. 用类似Tarjan的方式,对于每个联通块建立一棵搜索树,尽量让每一个节点的儿子两两配对,如果做不到就用上头顶的天线. # ...
- 20175203 2018-2019-2《Java程序设计》第五周学习总结
20175203 2018-2019-2<Java程序设计>第五周学习总结 第六章:接口与实现 本周学习了<Java程序设计>第六章的内容:接口与实现,以下为本周学习总结. 知 ...
- Emgucv图像处理工具
此工具是当年自己在学习Emgucv的时候,慢慢积累的,包含了常用的图像处理算法,非常适合新人学习,现放出源码,由于是以前做的,功能不全. 当时Emgucv的学习资料非常之少,没有一本书是讲Emgucv ...
- python - 小米推送使用
1. 小米文档及SDK下载 1.文档介绍 https://dev.mi.com/console/doc/detail?pId=863 sdk说明: 2.开发者需要登录开发者网站(申请AppID, Ap ...
- Gradle教程
Ant和Maven共享在Java市场上相当大的成功.ANT是在2000年发布了第一个版本的工具,它是基于程序编程思想的发展. 后来,人们在 Apache-Ivy的帮助下,网络接受插件和依赖管理的能力有 ...
- Jackson读取列表
List<MyBean> result = mapper.readValue(src, TypeFactory.collectionType(ArrayList.class, MyBean ...
- linux Jenkins搭建
安装jdk 下载jdk 解压 jdk1.8 vim /etc/profile export JAVA_HOME=/usr/local/java/jdk1.8.0_111export CLASSPA ...
- 【python标准库学习】thread，threading(一)多线程的介绍和使用
在单个程序中我们经常用多线程来处理不同的工作,尤其是有的工作需要等,那么我们会新建一个线程去等然后执行某些操作,当做完事后线程退出被回收.当一个程序运行时,就会有一个进程被系统所创建,同时也会有一个线 ...
- Neo4J空间数据存储
1.Neo4j Spatial 简介 1.1Neo4j Spatial概念 Neo4j Spatial项目是图数据库Neo4j的一个插件,它通过将空间数据映射到图模型(graph model),它将对 ...
- Java中File类创建文件
只需要调用该类的一个方法createNewFile(),但是在实际操作中需要注意一些事项,如判断文件是否存在,以及如何向新建文件中写入数据等. import java.io.*; public cla ...