数据可视化（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项目的时候,图表需要区分国内和国外显示.当前用户所属企业具备国内外权限的时候,展示两条图表,当查看其他企业需要根据选中的企业所具备的权限改变图表.即刚开始显示两条折线图,更改选择条件并重新 ...
随机推荐
- Binary Search - Jump on the Stones
Binary Search algorithm. Wikipedia definition: In computer science, binary search, also known as hal ...
- HTML5: HTML(5) 代码规范
ylbtech-HTML5: HTML(5) 代码规范 1.返回顶部 1. HTML(5) 代码规范 HTML 代码约定 很多 Web 开发人员对 HTML 的代码规范知之甚少. 在2000年至201 ...
- libVEX学习
VEX IR是一种更加接近于compiler使用的中间语言/中间表示,它是不依赖于特定体系架构的. 1. Code Blocks code blocks是VEX处理代码的一个单元,使用IRSB结构体表 ...
- 2019牛客多校第五场B-generator 1(矩阵快速幂)
generator 1 题目传送门 解题思路 矩阵快速幂.只是平时的矩阵快速幂是二进制的,这题要用十进制的快速幂. 代码如下 #include <bits/stdc++.h> #defin ...
- python学习笔记：文件操作和集合
一.文件操作 文件读写步骤:有一个文件,打开文件,操作文件读写文件,关闭文件. python 文件读写模式r,r+,w,w+,a,a+的区别(附代码示例) 模式 可做操作 若文件不存在 是否覆盖 r ...
- Execute Unix Command via Putty_QTP
plink_path = "C:/plink.exe" 'plink.exe 路径 username = "username" '用户名 p ...
- 安装项目依赖pipreqs并生成requirements.txt
安装项目依赖:sudo pip3 install pipreqs 生成依赖文件(requirements.txt):pipreqs ./ # 进入项目目录,在项目文件夹里生成安装依赖文件里的环境: ...
- Eureka 系列（04）客户端源码分析
Eureka 系列(04)客户端源码分析 [TOC] 0. Spring Cloud 系列目录 - Eureka 篇 在上一篇 Eureka 系列(01)最简使用姿态 中对 Eureka 的简单用法做 ...
- MATLAB图像uint8,uint16,double, rgb转灰度解释
1.uint8,uint16与double 为了节省存储空间,matlab为图像提供了特殊的数据类型uint8(8位无符号整数),以此方式存储的图像称作8位图像.matlab读入图像的数据是uint8 ...
- arcpy-字段唯一值、重复值、最值、平均值、方差、标准差、中数、众数
插个广告,制作ArcGIS的Tool工具学习下面的教程就对了: 零基础学习Python制作ArcGIS自定义工具观看链接 <零基础学习Python制作ArcGIS自定义工具>课程简介 im ...