数据可视化（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项目的时候,图表需要区分国内和国外显示.当前用户所属企业具备国内外权限的时候,展示两条图表,当查看其他企业需要根据选中的企业所具备的权限改变图表.即刚开始显示两条折线图,更改选择条件并重新 ...
随机推荐
- SAS创建和使用索引（SAS INDEX)
一.概述 在合并数据集的时候,可以使用DATA步,但使用DATA 步时需要对KEY VALUE 排序,且KEY VALUE 的名字也必须一致:也可以用PROC SQL ,不需要进行上述排序.重命名的步 ...
- LiveTelecast直播平台技术图谱skill-map
#直播平台技术图谱 ----##直播 ----###采集- **iOS** * HTTP Live Streaming * DirectShow- **Android** * setPreviewCa ...
- linux删除指定文件夹中某个文件除外的其他文件
# shopt -s extglob # rm -fr !(file1) 如果是多个要排除的,可以这样: # rm -rf !(file1|file2) 首先科普下shopt -s extglob B ...
- Linux中的特殊权限s、t、i、a
文件权限除了r.w.x外还有s.t.i.a权限:s:文件属主和组设置SUID和GUID,文件在被设置了s权限后将以root身份执行.在设置s权限时文件属主.属组必须先设置相应的x权限,否则s权限并不能 ...
- 2019山东省ACM省赛菜鸡的赛后总结
省赛总结 2019-05-13 21:27:40 虽然第一次就死的这么难看,但是的确发现了很多问题,我想这是未来我和我的队友要解决的,而不是去难过,去感慨自己是有多菜.在大一训练结束马上参加暑假集训的 ...
- Java对象finalize()方法
Java提供了一种在对象即将被销毁时执行资源释放的方法.在Java中创建对象,但是不能销毁对象.JVM运行一个称为垃圾收集器的低优先级特殊任务来销毁不再引用的所有对象. 垃圾回收器给我们一个机会,在对 ...
- yum update过程中失败后再次执行出现“xxxx is a duplicate with xxxx”问题
问题现象: 解决办法: 利用yum-uitls中的工具package-cleanup指令,使用方法见下图,具体可通过man package-cleanup查询 列出重复的rpm包 pac ...
- python调用tushare获取沪深A股票资金流向数据
接口:moneyflow 描述:获取沪深A股票资金流向数据,分析大单小单成交情况,用于判别资金动向 限量:单次最大提取4000行记录,总量不限制 积分:用户需要至少1500积分才可以调取,基础积分有流 ...
- [轉]Exploit Linux Kernel Slub Overflow
Exploit Linux Kernel Slub Overflow By wzt 一.前言 最近几年关于kernel exploit的研究比较热门,常见的内核提权漏洞大致可以分为几类: 空指针引用, ...
- SpringCloud-技术专区-Hystrix-使用指南
Maven依赖配置 <dependency> <groupId>org.springframework.cloud</groupId> <artifactId ...