echarts3 使用总结
由于项目需要自学了echarts,下面将学到的东西总结如下,如果有哪里写的不好,请批评指正
一、前期准备
1、使用echarts之前先要引入echarts.js,js可以到官网下载
2、写一个div容器用来装echarts内容,这个容器必须有高度,不然看不到内容。
3、在script中获取div容器的id,根据需要写option中的参数(也许你现在还不知道option是干嘛用的,不要着急往下看),使用setoption生成图表。
(代码如下)注:后面将不再对引入js,获取id,调用option生成图表做赘述
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<!-- 引入echarts.js -->
<script src="js/echarts.js "></script>
<script>
获取容器的id并赋值给变量myChart
var myChart = echarts.init(document.getElementById('main'));
/*用来配置参数*/
option = {
}
/*调用option生成图表*/
myChart.setOption(option)
</script>
</body>
</html>
二、各种图表使用
1、柱状图代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script src="js/echarts.js "></script>
<script>
var myChart = echarts.init(document.getElementById('main'));
myChart.title = '坐标轴刻度与标签对齐';
option = {
color: ['#3398DB'],
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器,坐标轴触发有效
type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'category',
data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisTick: {
alignWithLabel: true
}
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'直接访问',
type:'bar',
barWidth: '60%',
data:[10, 52, 200, 334, 390, 330, 220]
}
]
};
myChart.setOption(option)
</script>
</body>
</html>
运行结果
2、折线图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="pic4" style="width: 600px;height:400px;"></div>
<script src="js/echarts.js"></script>
<script>
var myChart13 = echarts.init(document.getElementById('pic4'));
var data = [];
option15 = {
title: {
text: '曲线',
},
tooltip: {
trigger: 'axis', },
legend: {
data:['昨日(11月8日)','今日(11月9日)']
},
grid: {
left: '1%',
right: '1%',
bottom: '3%',
containLabel: true
},
toolbox: {
show: false,
feature: {
dataZoom: {
yAxisIndex: 'none'
},
dataView: {readOnly: false},
magicType: {type: ['line', 'bar']},
restore: {},
saveAsImage: {}
}
},
color:["red","#CD3333"],
xAxis: {
type: 'category',
boundaryGap: false,
data : ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24']
},
yAxis: {
type: 'value',
name: '单位(kW)',
axisLabel: {
formatter: '{value}'
}
},
series: [
{
name:'昨日(11月8日)',
type:'line',
data:[110,106,110,110,318,119,205,256,156,309,256,306,206,356,456,486,565.45,234,156,206,126,256,150,276], },
{
type:'line',
name : '今日(11月9日)',
data:[210,136,120,120,118,219,195,176,156,329,356,346,406.54,256,156],
}
]
}; myChart13.setOption(option15);
</script>
</body>
</html>
运行结果
3、饼图
由于代码重复就不浪费地方写所有代码,直接替换(一)中的option{}就可以
option = {
title : {
text: '某站点用户访问来源',
subtext: '纯属虚构',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
},
series : [
{
name: '访问来源',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:[
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:1548, name:'搜索引擎'}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
运行结果
4、全国地图
由于地图比较复杂,所以把全部代码展示出来
china.js可以到官网下载所有代码,在echarts/map文件夹中可以找到china.js,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 1000px;height:800px;"></div>
/*<script src="node_modules/echarts/theme/shine.js"></script>*/
<script src="js/echarts.js"></script>
<script src="node_modules/echarts/map/js/china.js"></script>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'), 'shine');
function randomData() {
return Math.round(Math.random()*1000);
}
option = {
title: {
text: 'iphone销量',
subtext: '纯属虚构',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left',
data:['iphone3','iphone4','iphone5']
},
visualMap: {
min: 0,
max: 2500,
left: 'left',
top: 'bottom',
text: ['高','低'], // 文本,默认为数值文本
calculable: true
},
toolbox: {
show: false,
orient: 'vertical',
left: 'right',
top: 'center',
feature: {
dataView: {readOnly: false},
restore: {},
saveAsImage: {}
}
},
series: [
{
itemStyle: {
normal: {
color: function (params) {
var colorList = [
'#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B',
'#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
'#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'
];
return colorList[params.dataIndex]
}, }
},
name: 'iphone3',
type: 'map',
mapType: 'china',
roam: false,
label: {
normal: {
show: true
},
emphasis: {
show: true
}
},
data:[
{name: '北京',value: randomData() },
{name: '天津',value: randomData() },
{name: '上海',value: randomData() },
{name: '重庆',value: randomData() },
{name: '河北',value: randomData() },
{name: '河南',value: randomData() },
{name: '云南',value: randomData() },
{name: '辽宁',value: randomData() },
{name: '黑龙江',value: randomData() },
{name: '湖南',value: randomData() },
{name: '安徽',value: randomData() },
{name: '山东',value: randomData() },
{name: '新疆',value: randomData() },
{name: '江苏',value: randomData() },
{name: '浙江',value: randomData() },
{name: '江西',value: randomData() },
{name: '湖北',value: randomData() },
{name: '广西',value: randomData() },
{name: '甘肃',value: randomData() },
{name: '山西',value: randomData() },
{name: '内蒙古',value: randomData() },
{name: '陕西',value: randomData() },
{name: '吉林',value: randomData() },
{name: '福建',value: randomData() },
{name: '贵州',value: randomData() },
{name: '广东',value: randomData() },
{name: '青海',value: randomData() },
{name: '西藏',value: randomData() },
{name: '四川',value: randomData() },
{name: '宁夏',value: randomData() },
{name: '海南',value: randomData() },
{name: '台湾',value: randomData() },
{name: '香港',value: randomData() },
{name: '澳门',value: randomData() }
] }
]
};
myChart.setOption(option);
</script> </body>
</html>
运行结果
5、城市地图(以北京为例)
beijing.js可以到官网下载所有代码,在echarts/map/province文件夹中可以找到beijing.js,其他城市的使用同样方法直接引入对应的js即可
代码
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body>
<div id="main" style="100%; height: 100%;"></div>
</body>
<script src="js/echarts.js"></script>
<script src="js/map/js/province/beijing.js"></script>
<script>
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text : '北京地图',
subtext : '-。-'
},
tooltip : {
trigger: 'item',
formatter: function(a){
return a[2];
}
},
legend: {
orient: 'vertical',
x:'right',
data:['数据名称']
},
dataRange: {
min: 0,
max: 1000,
color:['orange','yellow'],
text:['高','低'], // 文本,默认为数值文本
calculable : true
},
series : [
{
name: '数据名称',
type: 'map',
mapType: '北京',
selectedMode : 'single',
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
data:[
{name: '怀柔区',value: Math.round(Math.random()*1000)},
{name: '延庆县',value: Math.round(Math.random()*1000)},
{name: '密云县',value: Math.round(Math.random()*1000)},
{name: '昌平区',value: Math.round(Math.random()*1000)},
{name: '平谷区',value: Math.round(Math.random()*1000)},
{name: '顺义区',value: Math.round(Math.random()*1000)},
{name: '门头沟区',value: Math.round(Math.random()*1000)},
{name: '海淀区',value: Math.round(Math.random()*1000)},
{name: '朝阳区',value: Math.round(Math.random()*1000)},
{name: '石景山区',value: Math.round(Math.random()*1000)},
{name: '西城区',value: Math.round(Math.random()*1000)},
{name: '东城区',value: Math.round(Math.random()*1000)},
{name: '宣武区',value: Math.round(Math.random()*1000)},
{name: '丰台区',value: Math.round(Math.random()*1000)},
{name: '房山区',value: Math.round(Math.random()*1000)},
{name: '通州区',value: Math.round(Math.random()*1000)},
{name: '大兴区',value: Math.round(Math.random()*1000)}, ]
}
]
};
myChart.setOption(option);
</script>
</html>
运行结果
其他图就不做赘述,官网www.echarts.baidu.com作品中有具体例子可以根据需要直接替换option中的内容即可得到想要的结果。
四、问题补充
下面补充的内容是我在用到时候遇到的,看了官网api百度搜索了很多找到,现在做总结放到这希望自己可以帮助到一些人,也为了以后自己用好找
1、图表自适应
interval:0 //设置间隔,0的时候全部显示
},
4、折线图的折线平滑显示
series: [
smooth: true,
]
5、地图移动放大缩小
oamController: { //可移动放大缩小地图
show: true,
x: 'right',
mapTypeControl: {
'china': true
}
},
6、改变地图颜色和轮廓颜色
series : [
{
itemStyle:{
normal:{
label:{show:true},
areaStyle:{color:'#c0e7fa'},//地图整体颜色
borderColor: '#fff',//地图各省轮廓颜色
borderWidth: 1,//地图各省轮廓线条粗细
},
emphasis:{label:{show:true}},
}, ]
7、为地图绑定单击事件
使用click事件时必须设置series : [clickable : true,]
myChart.on(ecConfig.EVENT.CLICK, function (param){
var tooltipList='<div class="map-sql"><p class="map-title">{b}项目<p><p class="map-p1"><img src="././img/zhuangji.png"><span>容量:20ml</span><img class="map-img1" src="././img /zongfa.png"><span>总量:40kg</span></p><p class="map-p2"><img src="././img/huangguang.png"><span>光:30kW</span></p><p class="map-p1"><img src="././img/jiance.png"><span>监测:18个</span><img class="map-img1" src="././img/dianshu.png"><span>点数:941点</span></p></div> '
if (typeof param.seriesIndex == 'undefined') {
return;
}
if (param.type == 'click') {
//获取dom对象
var results = document.getElementsByClassName('map-lig');
var objbj = document.getElementById('map-lightbj'); //北京
var objsx = document.getElementById('map-lightsx'); //山西
var objsc = document.getElementById('map-lightsc');//四川
var objjl = document.getElementById('map-lightjl');//吉林
var parm = param.name;
if(parm == '北京'){
for(var i=0;i<results.length;i++){
if(objbj == results[i]){
results[i].style.display = "block";
}else{
results[i].style.display = "none";
}
}
}else if(parm == '山西'){
for(var i=0;i<results.length;i++){
if(objsx == results[i]){
results[i].style.display = "block";
}else{
results[i].style.display = "none";
}
}
}else if(parm == '四川'){
for(var i=0;i<results.length;i++){
if(objsc == results[i]){
results[i].style.display = "block";
}else{
results[i].style.display = "none";
}
}
}
else if(parm == '吉林'){
for(var i=0;i<results.length;i++){
if(objjl == results[i]){
results[i].style.display = "block";
}else{
results[i].style.display = "none";
}
}
}
else{
for(var i=0;i<results.length;i++){
results[i].style.display = "none";
}
}
}
});
});
附加新内容见echarts3使用总结2http://www.cnblogs.com/hhw3/p/7365117.html
上述内容是参照echarts官网http://echarts.baidu.com/,若有侵权请联系,谢谢!
作者:BlancheWang
出处:http://www.cnblogs.com/hhw3
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接。
echarts3 使用总结的更多相关文章
- Echarts3 关系图-力导向布局图
因为项目需要,要求实现类似力导图效果的图,我就瞄上了echarts. 注意事项1:由于我的项目要部署到内网,所以js文件要在本地,网上大多力导图都是echarts2的,而其又依赖zrender基础库, ...
- flask+sqlite3+echarts3 系统监控
总的而言,分三部分: 1.监控器(monitor.py): 每秒获取系统的四个cpu的使用率,存入数据库. 2.路由器(app.py): 响应页面的ajax,获取最新的一条或多条数据. 3.页面(in ...
- flask+sqlite3+echarts3+ajax 异步更新数据
结构: /www | |-- /static |....|-- jquery-3.1.1.js |....|-- echarts.js(echarts3是单文件!!) | |-- /templates ...
- flask+sqlite3+echarts3+ajax 异步数据加载
结构: /www | |-- /static |....|-- jquery-3.1.1.js |....|-- echarts.js(echarts3是单文件!!) | |-- /templates ...
- 关于echarts3地图下钻省市
最近关于echarts3弄了个地图下钻,也许是因为运气不好,开始上来需要传递到的城市是成都,结果成都地图(js)加载下来总是挤到了一起,好尴尬,各方实验查找后发现原来是js文件中,成都市地图有个县市并 ...
- asp.net mvc5+Echarts3.0+AspNet.SignalR2.0 实时监控cpu占用率推送
先看看效果: 感谢QQ群18668853的群主,无私的公开课,全是干货,当初学的时候,群主用的是jquery.flot做图表,我这里改成百度的Echarts3.0,这算是自己的修改吧,喜欢的可以去下载 ...
- Echarts3
今天用想在后台首页做个图表,看到highcharts没用喜欢的样式 想起了Echarts,百度了下,发现不一样了呢,原来出了Echarts3 感觉这个比Echarts2好用多了 下载了个精简版,ech ...
- echarts3 中 热力图的属性大全
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- 在echarts3中使用字符云
echarts2的官方API里是带有字符云的,但到了echarts3就被从官网上移除了,想要使用的话可以从github上下载: 下载地址:https://github.com/ecomfe/echar ...
- 【echarts3】--1 简单入门
echarts3 相信大家都了解吧,是百度研发的 ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8 ...
随机推荐
- 洛谷P1803 凌乱的yyy dp
我要日更嘤嘤嘤>_< 原题戳>>https://www.luogu.org/problem/show?pid=1803<<(其实是戳不动的,复制粘贴吧) 题目背景 ...
- 1. AMQP 0-9-1模型简介(官网直译)
关于这篇指导文档 本文提供了AMQP 0-9-1协议的一个概述,它是RabbitMQ所支持的协议之一. AMQP 0-9-1是什么 AMQP 0-9-1(Advanced Message Queuin ...
- 什么是java OOM?如何分析及解决oom问题?
最近查找了很多关于OOM,甚至于Java内存管理以及JVM的相关资料,发现这方面的东西太多了,竟有一种眼花缭乱的感觉,要想了解全面的话,恐非一篇文章能说清的,因此按照自己的理解整理了一篇,剩下的还需要 ...
- Oracle spatial、openlayers、geoserver开发地理信息系统总结
感谢开源,使用OpenLayers+Geoserver的地理信息系统开发很简单,完全可以套用开发MIS系统的经验,我这里总结为三个步骤: 1.数据准备 2.数据发布 3.数据展现 我将按照这个思路来介 ...
- layui upload 后台获取不到值
后台获取不到值方法一: <script> layui.use('upload', function () { var upload = layui.upload; //执行实例 var u ...
- 【Python】【有趣的模块】tqdm | inspect
tqdm """ [tqdm] 显示循环的进度条,再也不用担心程序跑到哪里还要跑多久了 tqdm 可以直接包裹iterable对象 from tqdm import tq ...
- 用Github做一个静态网页(GithubPages)
一.新建一个仓库(new). 二.命名Repository name为:(名字).github.io(一定要有.github.io). 三.勾选Initialize this repository w ...
- git 命令 clone分支的代码
一个项目通常含有很多分支, master分支一般是经过测试,验证没有问题后,代码才会提交到master分支 develop分支,是测试经常拉下来进行测试的分支 直接复制develop分支的git 命令 ...
- 设计模式(五)Builder Pattern建造者模式
在我们日常生活中,如构建一个飞船,一个手机,一栋建筑,都会有非常复杂的组装,这时候应该用到建造者模式 以建造一个飞船为例 案例:造小页飞船 1.飞船各部分元件 package com.littlepa ...
- R语言barplot双坐标作图
需要注意的是,设置其中的柱子的宽度,间隔的宽度.有公式如下 width为柱子的宽度 space为间隔宽度 barnumbers 为柱子数量 那么xlim的设置右侧范围为:(width + space) ...