数据可视化（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项目的时候,图表需要区分国内和国外显示.当前用户所属企业具备国内外权限的时候,展示两条图表,当查看其他企业需要根据选中的企业所具备的权限改变图表.即刚开始显示两条折线图,更改选择条件并重新 ...
随机推荐
- tomcat的stratup小黑框名字修改
Tomcat的bin目录下:catalina.out文件, TITLE就是Tomcat startup窗口的名称,282行默认是:Tomcat.这里建议改成“服务名+端口号”的方式,看起来一目了然.因 ...
- （转）使用OpenGL显示图像（六）响应触摸事件
响应触摸事件 编写:jdneo - 原文:http://developer.android.com/training/graphics/opengl/touch.html 让对象根据预设的程序运动(如 ...
- php开发面试题---lavarel和tp的区别是什么（呕心整理）
php开发面试题---lavarel和tp的区别是什么(呕心整理) 一.总结 一句话总结: 反思的回顾非常有用,因为决定了我的方向和技巧 以战养己,这是非常非常好的方式 主要从大小.功能.安全性.操作 ...
- HTML5: HTML5 Web Workers
ylbtech-HTML5: HTML5 Web Workers 1.返回顶部 1. HTML5 Web Workers web worker 是运行在后台的 JavaScript,不会影响页面的性能 ...
- HSQL基本使用（linux），安装+Demo
文章目录 下载 安装 运行 使用数据库 demo 注意 下载 http://sourceforge.net/projects/hsqldb/files/ 安装 将下载的包,解压到任意目录即可 运行 通 ...
- 2.Prometheus安装部署
环境准备 2台Linux操作系统(基于centos7) docker环境 配置 IP 角色 版本 192.168.229.139 prometheus-server 2.10 192.168.229. ...
- HTML5网页如何让所有的浏览器都能识别语义元素标签样式
浏览器对语义元素的支持情况 如今HTML5愈来愈引发大家的关注了,但目前支持HTML5的浏览器还不是主流,特别是国内用户近50%以上仍旧使用IE6,由于支持HTML5的IE9不支持Xp系统安装,这样未 ...
- mvnw简介
- sql 查询库是否存在
网上查了很多,但是都是不完整的,很多坑,后面终于摸索出来了:DROP DATABASE IF EXISTS 库名(不要加引号); 这句话的意思就是如果库存在,就删除库,然后再新建库就行了.
- Joda-Time 入门
Joda-Time 令时间和日期值变得易于管理.操作和理解.事实上,易于使用是 Joda 的主要设计目标.其他目标包括可扩展性.完整的特性集以及对多种日历系统的支持.并且 Joda 与 JDK 是百分 ...