echarts学习1----格式整理以及地图入门

来源：互联网发布：玲珑网游加速器mac 编辑：程序博客网时间：2024/04/27 08:36

首先，Echarts是结合html/ javascript一起运用的，可以在线也可以离线使用。

下面是一个.html文件的代码及解析：

<!DOCTYPE html>

<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>ECharts 学习</title>
</head>

前面就先这样固定，保证中文也能识别，其它下面的都包含在<body></body>里面

下面是在线版本：
在<body></body>里面的第一段：
<div id="main" style="height:400px"></div> //搞一个合适大小的div空间
//ECharts单文件引入
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">
// 路径配置
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
下面是离线版本1：
我下载了那个包，把它放在同一个文件夹：
<div id="main" style="height:400px"></div>
<script src="echarts/echarts.js"></script>
<script type="text/javascript">

把路径配置那个部分直接删掉就行了；

但是后来我弄那个地图的时候就要有require.config和它里面的paths
require.config({
paths:{
'bar' : 'echarts/chart/bar',
'line': 'echarts/chart/line',
'map' : 'echarts/chart/map'
}
});//我自己写是这样的，呵呵，下面有解析

<body>里面的第二段：

首先要了解一下require函数，首先是require.config()函数：
假设我们的项目结构如下：
index.html
main.js
libs
--haha.js
--cores
--cores1.js
--core2.js
--utils
--util1.js
--util2.js
--services
--service1.js
--service2.js

如果项目规模比较大，那么js文件将会非常多，通常我们会按照目录进行组织和分组。在上面的代码中如果我们想使用core1.js、core2.js、util1.js、util2.js、service1.js、service2.js这6个模块。那么我可以在main.js中做如下配置：
requirejs.config({
baseUrl: 'libs',
paths: {
"core1": 'cores/core1',
"core2": 'cores/core2',
"util1": 'utils/util1',
"util2": 'utils/util2',
"service1": 'services/service1',
"service2": 'services/service2',
}
});

第二个是真正的require函数：

require(['jquery'], function($) { // 这个函数加载 jquery 依赖，然后执行回调代码
console.log($);
});

整个用require ();包括

例子1：一个柱状图
// 使用
require(
[
'echarts',
'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
],
function (ec) {
//都要先获取一下上面那个div
var myChart = ec.init(document.getElementById('main'));

var option = {
tooltip: {
show: true
},
legend: {
data:['销量']
},
xAxis : [
{
type : 'category',
data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
"name":"销量",
"type":"bar",
"data":[5, 20, 40, 10, 10, 20]
}
]
};

// 为echarts对象加载数据
myChart.setOption(option);
}
);
</script>
</body>

例子2：一个地图的

//动态加载echarts，在回掉函数中使用，要注意保持按需加载结构定义图表路径

require(

[

'echarts',

'echarts/chart/map' //这里用map，就把map模块弄进来

//第二部分就是一个函数 function(ec) { }
function (ec) {

var myChart=ec.init(document.getElementById('main'));

//option主要是图标的一些设置，这不是这篇文章的重点，关于具体的设置可以参考官方的文档说明文档

option= {

title: {
text:'iphone销量',
subtext:'纯属虚构',
x:'center'
},
//这样就能做一个标题

//接下来是tooltip控件，就是你放上去它会提示东西
tooltip: {

trigger:'item'

},
//如果像上面这样写的话，它显示的会是所有的总和。像下面这样写就不会
tooltip: {
trigger: 'item',
formatter: function(params) {
var res = params.name+'<br/>';
var myseries = option.series;
for (var i = 0; i < myseries.length; i++) {
res+= myseries[i].name;
for(var j=0;j<myseries[i].data.length;j++){
if(myseries[i].data[j].name==params.name){
res+=' : '+myseries[i].data[j].value+'</br>';
}
}
}
return res;
}
},

//legend就是左上角的那个东西
legend: {
orient:'vertical',
x:'left',
data: ['iphone3','iphone4','iphone5']
},

//这个就是左下角那个柱状图
dataRange: {
min:0,
max:2500,
text: ['高','低'],
calculable:true,//这个要是true的话就可以像个柱子一样随时显示，但是要是false的话就是断的，而且显示不了数字，只有等级颜色
textStyle: {
color:'orange'//那个数字的颜色
}
},

//这个暂时不知道是干嘛的……
toolbox: {
show:true,
orient:'vertical',
x:'right',
y:'center',
feature: {
mark:true,
dataView: { readOnly:false },
restore:true,
saveAsImage:true
}
},

//接下来这个就是显示那个地图的那些部分了
series: [ //这个里面分成iphone3,iphone4和iphone5三个部分

{
name:'iphone3',
type:'map',
mapType:'china',
selectedMode: 'single',//大概意思是说选择模式是单选吧
itemStyle: {
normal: { label: { show:true },color:'#ffd700' },//这个就是给那个legend用的，也会标在地图上
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) },

{ 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) }

]

},

{

name:'iphone4',

type:'map',

mapType:'china',

selectedMode: 'single',

itemStyle: {

normal: { label: { show:true },color:'#ff8c00' },// for legend

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) },

{ name:'香港',value:Math.round(Math.random() *1000) },

{ name:'澳门',value:Math.round(Math.random() *1000) }

]

},

{

name:'iphone5',

type:'map',

mapType:'china',

selectedMode: 'single',

itemStyle: {

normal: { label: { show:true },color:'#da70d6' },// for legend

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) }

]

}
]
};
//以上大同小异，就是从iphone3到iphone5的一些数据。

//以下的这段代码主要是用来处理用户的选择，应用场景是可以做地图的交互，比如点击地图上的某一个省，获取相应的省的指标变化等。
//需要特别注意的是，如果需要点击某一省作地图的操作交互的话，还需要为series属性的每一项添加一个selectedMode属性，这里的属性值为 'single'即单选，也可多选

var ecConfig= require('echarts/config');
myChart.on(ecConfig.EVENT.MAP_SELECTED,function (param) {
varselected=param.selected;
varmapSeries=option.series[0];
vardata= [];
varlegendData= [];
varname;
for (varp=0,len=mapSeries.data.length; p<len; p++) {
name=mapSeries.data[p].name;
mapSeries.data[p].selected=selected[name];
if (selected[name]) {
alert(name); //这里只是简单的做一个事例说明，弹出用户所选的省，如需做其他的扩展，可以在这里边添加相应的操作

}
}
});
myChart.setOption(option);
}
);

0 0