您的位置：首页 > 其它

echarts基本使用

2017-06-03 21:03 375 查看

项目中要做图形报表，要求使用echarts实现，以前有用过，不过忘得差不多了，现在重新学学。

我的GitHub练习代码

echarts官网提供了源码和说明文档，使用echarts需要先到官网下载需要的js源文件，如果用到主题和地图，也需要到官网进行下载。

可以在使用 webpack 的项目中引入和打包 ECharts

1.npm 安装 ECharts

npm install echarts --save

2.按需引入 ECharts 图表和组件

默认使用

require('echarts')

得到的是已经加载了所有图表和组件的 ECharts 包，因此体积会比较大，如果在项目中对体积要求比较苛刻，也可以只按需引入需要的模块。

例如上面示例代码中只用到了柱状图，提示框和标题组件，因此在引入的时候也只需要引入这些模块，可以有效的将打包后的体积从 400 多 KB 减小到 170 多 KB。

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入柱状图
require('echarts/lib/chart/bar');
// 引入提示框和标题组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');

3.准备容器、添加数据

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 绘制图表
myChart.setOption({
title: { text: 'ECharts 入门示例' },
tooltip: {},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
});

试手练习：

引入中国地图，通过百度地图的Geocoding API（提供从地址到经纬度坐标或者从经纬度坐标到地址的转换服务），实现输入地址，显示地图上对应地址位置和经纬度。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>国内地址查找</title>
<link rel="stylesheet" href="../bootstrap.min.css">
<style>
#place-input{
width:80%;
}
form{
margin:30px auto;
}
</style>
</head>
<body>

<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-inline">
<input id="place-input" type="text"  class="form-control" value="武汉" placeholder="请输入地址">
<button type="button" id="search-btn" class="btn btn-success">查询</button>
</form>
</div>
<div>

<div class="row">
<div class="col-md-6 col-md-offset-3">
<div id="main" style="height:500px;"></div>
</div>
</div>
</div>

<script src='../jquery.min.js'></script>
<script src='../echarts.min.js'></script>
<script src='../china.js'></script>
<script>
// 百度地图的开发者秘钥
var token ="hYunmpdXsChCGd42pYmiExGkdZmAhm3N";
var url = 'http://api.map.baidu.com/geocoder/v2/?output=json&ak=' + token + '&address=';
var ePlaceInput = $('#place-input');
var eSearchBtn = $('#search-btn');
var myChart = echarts.init(document.getElementById('main'));
var chartData = [];
eSearchBtn.click(function() {
var place = ePlaceInput.val();
if (place) {
$.getJSON(url + place + '&callback=?', function(res) {
var loc;
if (res.status === 0) {
loc = res.result.location;
chartData.push({
name: place,
value: [loc.lng, loc.lat]
})
drawMap(place);
}else{
alert('百度没有找到地址信息');
}
})
}
})

function drawMap(name) {

var option = {
backgroundColor: ' 	#B0B0B0',
title: {
text: '地址查询',
left: 'center',
textStyle: {
color: '#fff'
}
},
tooltip: {
trigger: 'item'
},
toolbox: {
show: true,
feature: {
saveAsImage: {
show: true
}
}
},
geo: {
map: 'china',
label: {
emphasis: {
show: false,
}
},
roam: true,
itemStyle: {
normal: {
areaColor: '#636363',
borderColor: '#222'
},
emphasis: {
areaColor: '#333'
}
}
},
series: [{
name: '地址的经纬度',
type: 'scatter',
coordinateSystem: 'geo',
data: chartData,
symbolSize: function(val) {
return 10;
},
}]
}
myChart.setOption(option)
}

</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航