Echarts的介绍

Echarts是数据图表，是基于Canvas的，纯Javascript 的图表库。

我第一次接触Echarts还是在前一个公司里，后来做感兴趣就又玩了玩。

首先：要写一个div 用来存放图表，并且引用Echarts.js

代码如下：

<div id="main" style="height:800px"></div>
<script src="~/Echarts/echarts-all.js"></script>

然后就是根据Echarts开发文档，进行数据的绑定。（地图分布情况）示例：

var list = [];
$(function () {
$.ajax({
type: "Post",
url: 数据请求url,
dataType: "json",
success: function (data) {
list = data.List;
// 基于准备好的dom，初始化echarts图表
var myChart = echarts.init(document.getElementById('main'));

option = {
title: {
text: '会员分布图',
x: 'center'
},
tooltip: {
trigger: 'item'
},

toolbox: {
show: true,
orient: 'vertical',
x: 'right',
y: 'center',
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
restore: { show: true },
saveAsImage: { show: true }
}
},
roamController: {
show: true,
x: 'right',
mapTypeControl: {
'china': true
}
},
series: [
{
name: '会员数量',
type: 'map',
mapType: 'china',
roam: false,
itemStyle: {
normal: { label: { show: true } },
emphasis: { label: { show: true } }
},
data: list
}
]
};

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

其中list数据形式如下：

[{name: '北京',value: 3},
{name: '天津',value: 6},
{name: '上海',value:9}]

Echarts文档地址http://echarts.baidu.com/echarts2/doc/example.html;具体属性可以在参考文档里面找到。

转载于:https://www.cnblogs.com/haidao-mumu/p/5307813.html