visualmap折线图_使用Echarts几分钟制作出折线图、饼图、柱状图等
ECharts，缩写来自Enterprise Charts。 ECharts，不仅是国内关注度最高的开源项目，还是中国第一个也是目前唯一一个入选了Github Explorer Data Visualization板块的开源项目。
这里咱们结合上篇提到的Bootstrap简单栅格框架，来做一个小小的布局。学以致用嘛。从来不喜欢赘述，直接上代码，一切的解释，请看代码注释：
$(document).ready(function(){
/**饼图*/
var myChart = echarts.init(document.getElementById('pie_photo_id'), 'vintage');
/*myChart：为Echart对象
pie_photo_id：显示位置
vintage：图表的主题*/
option = {//Echarts的参数配置
title : {//标题
text: '饼图的标题',//主标题
subtext: '形容词',//fubiaoti
x:'center'
},
tooltip : {//提示
trigger: 'item',//触发提示的类型：数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
formatter: "{a}
{b} : {c} ({d}%)"//提示框浮层内容格式器，支持字符串模板和回调函数两种形式。
},
legend: {//图例组件。
orient: 'vertical',//图例列表的布局朝向。
left: 'left',//图例组件离容器左侧的距离。
data: ['类型1','类型2','类型3','类型4','类型5']
/**
* 图例的数据数组。数组项通常为一个字符串，每一项代表一个系列的 name
* (如果是饼图，也可以是饼图单个数据的 name)。图例组件会自动根据对
* 应系列的图形标记(symbol)来绘制自己的颜色和标记，特殊字符串 ''
* (空字符串)或者 '\n'(换行字符串)用于图例的换行。
如果 data 没有被指定，会自动从当前系列中获取。
多数系列会取自 series.name 或者 series.encode 的 seriesName 所指定的维度。
如 饼图 and 漏斗图 等会取自 series.data 中的 name。
如果要设置单独一项的样式，也可以把该项写成配置项对象。
此时必须使用 name 属性对应表示系列的 name。
*/
},
series : [ //系列列表。每个系列通过 type 决定自己的图表类型
{
name: '提示信息',
type: 'pie',
/**
* 饼图主要用于表现不同类目的数据在总和中的占比。
* 每个的弧度表示数据数量的比例。
*/
radius : '55%',
center: ['50%', '60%'],
data:[
{value:335, name:'类型1'},
{value:310, name:'类型2'},
{value:234, name:'类型3'},
{value:135, name:'类型4'},
{value:1548, name:'类型5'}
],
itemStyle: {//图形样式。
emphasis: {
shadowBlur: 10,//图形阴影的模糊大小。
shadowOffsetX: 0,//阴影水平方向上的偏移距离。
shadowColor: 'rgba(0, 0, 0, 0.5)'
/**
* 颜色可以使用 RGB 表示，比如 'rgb(128, 128, 128)'，
* 如果想要加上 alpha 通道表示不透明度，可以使用 RGBA，
* 比如 'rgba(128, 128, 128, 0.5)'，
* 也可以使用十六进制格式，比如 '#ccc'。
* 除了纯色之外颜色也支持渐变色和纹理填充
*/
}
}
}
]
};
myChart.setOption(option);
})
/**折线图*/
var lineChart = echarts.init(document.getElementById('line_photo_id'), 'vintage');
option = {
title: {
text: '某某消费情况分布',
subtext: '副标题'
},
tooltip: {
trigger: 'axis',//坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
axisPointer: {//坐标轴指示器配置项。
type: 'cross'
}
},
toolbox: {//工具栏。内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。
show: true,//是否显示工具栏
feature: {
saveAsImage: {}//保存为图片
}
},
xAxis: {
/**直角坐标系 grid 中的 x 轴，一般情况下单个 grid 组件最多只能放上下两个 x 轴，
* 多于两个 x 轴需要通过配置 offset 属性防止同个位置多个 x 轴的重叠。
*/
type: 'category',// 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。
boundaryGap: false,//坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。
data: ['00:00', '01:15', '02:30', '03:45', '05:00', '06:15', '07:30',
'08:45', '10:00', '11:15', '12:30', '13:45', '15:00', '16:15',
'17:30', '18:45', '20:00', '21:15', '22:30', '23:45']
/**类目数据，在类目轴(type: 'category')中有效。
*/
},
yAxis: {
/**直角坐标系 grid 中的 y 轴，一般情况下单个 grid
* 组件最多只能放左右两个 y 轴，多于两个 y 轴
* 需要通过配置 offset 属性防止同个位置多个 Y 轴的重叠。
*/
type: 'value',//坐标轴类型。数值轴，适用于连续数据。
axisLabel: {//坐标轴刻度标签的相关设置。
formatter: '{value} W'//刻度标签的内容格式器，支持字符串模板和回调函数两种形式。
},
axisPointer: {//折叠详情
snap: true//坐标轴指示器是否自动吸附到点上。默认自动判断。
}
},
visualMap: {//视觉映射组件，用于进行『视觉编码』，也就是将数据映射到视觉元素(视觉通道)。
show: false,
dimension: 0,
pieces: [{
lte: 6,
color: 'green'
}, {
gt: 6,
lte: 8,
color: 'red'
}, {
gt: 8,
lte: 14,
color: 'green'
}, {
gt: 14,
lte: 17,
color: 'red'
}, {
gt: 17,
color: 'green'
}]
},
series: [
/**折线图是用折线将各个数据点标志连接起来的图表，
* 用于展现数据的变化趋势。可用于直角坐标系和极坐标系上。
*/
{
name:'消费指数',
type:'line',
smooth: true,//是否平滑曲线显示。
data: [300, 280, 250, 260, 270, 300, 550, 500, 400, 390,
380, 390, 400, 500, 600, 750, 800, 700, 600, 400],
markArea: {//图表标域，常用于标记图表中某个范围的数据
data: [ [{
name: '春季',
xAxis: '07:30'
}, {
xAxis: '10:00'
}], [{
name: '秋季',
xAxis: '17:30'
}, {
xAxis: '21:15'
}] ]
}
}
]
};
lineChart.setOption(option);
/**柱状图*/
var barChart = echarts.init(document.getElementById('bar_photo_id'), 'vintage');
option = {
title: {
text: '主标题',
subtext: '副标题'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['2017年', '2018年']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01]
},
yAxis: {
type: 'category',
data: ['y轴1','y轴2','y轴3','y轴4','y轴5','单位']
},
series: [
{
name: '2017年',
type: 'bar',
data: [18203, 23489, 29034, 104970, 131744, 630230]
},
{
name: '2018年',
type: 'bar',
data: [19325, 23438, 31000, 121594, 134141, 681807]
}
]
};
barChart.setOption(option);
演示效果：
更多详细内容，请参照百度的Echarts官网。
visualmap折线图_使用Echarts几分钟制作出折线图、饼图、柱状图等相关推荐
- 下如何画出频率瀑布图_用maftools一行代码画出瀑布图
昨天本科的一个师姐问我关于瀑布图的画法,想要画个瀑布图,问我有没有有什么工具可以画的,目标图如下 于是给师姐介绍了maftools这个R包,这个R包功能非常强大,可以做各种各样的图,今天就拿瀑布图为例 ...
- 利用ChatGPT，一分钟制作思维导图
大家好,我是易安! 今天我来教你如何使用ChatGPT,一分钟制作出一份思维导图 大纲选题 想到一个课题,然后人工梳理出内容大纲,是个挺费精力的事情.但利用ChatGPT来做这件事. 5秒就可以搞定啦 ...
- hdc mfc 画扇形图_使用echarts绘制条形图和扇形图
使用echarts绘制条形图和扇形图 简单举例说明下echarts如何绘制条形图和扇形图 代码示例 echarts绘制条形图和扇形图 var mychart1=echarts.init(documen ...
- 一分钟学会看k线图_教你一分钟怎样学会看k线图（纯干货）
K线图最早是日本德川幕府时代大阪的米商用来记录当时一天.一周或一月中米价涨跌行情的图示法,后被引入股市.K线图有直观.立体感强.携带信息量大的特点,蕴涵着丰富的东方哲学思想,能充分显示股价趋势的强弱. ...
- tableau做折线图_【tableau入门教程04】折线图
接上一篇的以拆分整理后的[中国电影网电影_data.xlsx]数据,接下来我们制作折线图查看2008-2018年间电影的数量和票房之间的关系 折线图折线图用于显示数据在一个连续的时间间隔或者时间跨度上 ...
- 一分钟学会看k线图_教你一分钟怎样学会看k线图
公众号上提供免费诊股功能,每天分析大盘,带你捕捉牛股 K线图最早是日本德川幕府时代大阪的米商用来记录当时一天.一周或一月中米价涨跌行情的图示法,后被引入股市.K线图有直观.立体感强.携带信息量大的特点 ...
- 设计桑基图_教你用pyecharts制作交互式桑基图，赶快学起来吧！
由于工作的需要,经常需要进行可视化展示,除了一些常用的BI工具,我也会使用python对数据进行可视化. python的第三方可视化库有很多,比如matplotlib.seaborn.plotly.b ...
- 用计算机画出方格表,方格造型图_怎么做这种颜色相间的方格图（有图）_彩妆阁...
1.怎么做这种颜色相间的方格图(有图) 经典做法: 1.新建4*4像素的画布,背景色为白. 2.将画布放大到最大,在画布四个角各填充一个像素的黑色块(可以用选框工具选中一个像素),画布中间填充一个四个 ...
- python slice函数画高维图_没想到Python还能画六维图
我们的大脑通常最多能感知三维空间,超过三维就很难想象了.尽管是三维,理解起来也很费劲,所以大多数情况下都使用二维平面. 来自维基百科 不过,我们仍然可以绘制出多维空间,今天就来用 Python 的 p ...
最新文章
- 记录理解程度、一篇至少读3遍，吴恩达建议这样读论文
- 网络爬虫介绍||为什么学网络爬虫
- ESP32-CAM使用过程中可能会遇到的问题
- TVS二极管挑选法宝，聪明的你看看也知道
- 视频监控技术 迎来网络“多媒体”时代
- 20145237 《信息安全系统设计基础》第2周学习总结
- 【HDU - 1024 】Max Sum Plus Plus （dp及优化，最大m子段和）
- np.numpy列表的负数索引问题
- Python中的for in if 用法
- smarty模板基础2 缓存文件
- PostgreSQL自动增量
- C++ std::set find 错误 operator中不能有＜=
- Atitit数据库层次架构表与知识点 attilax 总结
- 2021全国大学生数学建模竞赛E题思路
- 如何制作音乐界面动效设计
- Metasploit之——基本后渗透命令
- 中考计算机易错知识点,【中考备考】易错知识点归类
- RF 电路设计中的常见问题及解决方案
- matlab怎么标记节点,为图节点和边添加标签
- 缓存与分布式锁——场景实现