1.【柱状图】
（1）echarts.init
// 绑定柱状图表
var myChartHot;
//初始化echarts实例
myChartHot = echarts.init(document.getElementById('hotMap'));
<script src="~/Areas/MapFrame/Scripts/../echarts.min.js"></script>
(2)showLoading
myChartHot.showLoading({
text: '正在努力的读取数据...',
effect: 'bubble'
});
(3)options
图表选项，包含图表实例任何可配置选项： 公共选项 ， 组件选项 ， 数据选项
（3.1tooltip）提示框，鼠标悬浮交互时的信息提示
https://echarts.baidu.com/echarts2/doc/doc.html#Tooltip
tooltip: {
trigger: 'item',//
| {string} trigger | 'item' | 触发类型，默认数据触发，见下图，可选为：'item' | 'axis' |
backgroundColor: 'white',//
| {color} backgroundColor | 'rgba(0,0,0,0.7)' | 提示背景颜色，默认为透明度为0.7的黑色 |
borderColor: '#87CEEB',
| {string} borderColor | '#333' | 提示边框颜色 |
borderWidth: 2,
| {number} borderWidth | 0 | 提示边框线宽，单位px，默认为0（无边框） |
textStyle: {//文字样式
fontFamily: 'Lucida Grande',
| {string} fontFamily | 'Arial, Verdana, sans-serif' | 字体系列 |
color: 'black',
| {color} color | 各异 | 颜色 |
fontWeight: 'bold',
| {string | number} fontWeight | 'normal' | 粗细，可选为：'normal' | 'bold' | 'bolder' | 'lighter' | 100 | 200 |... | 900 |
fontSize: 14
| {number} fontSize | 12 | 字号 ，单位px |
}
https://echarts.baidu.com/echarts2/doc/doc.html#TextStyle
| {Object} textStyle | { color:'#fff' } | 文本样式，默认为白色字体（详见textStyle） |
}
(3.2toolbox)工具箱，每个图表最多仅有一个工具箱
https://echarts.baidu.com/echarts2/doc/doc.html#Toolbox
toolbox: {
show: true,
| {boolean} show | false | 显示策略，可选为：true（显示） | false（隐藏） |
feature: {
mark: { show: true },//mark，辅助线标志，
dataZoom: { show: true },//框选区域缩放，
dataView: { show: false, readOnly: false },//数据视图，
- {boolean=} readOnly 默认数据视图为只读，可指定readOnly为false打开编辑功能
restore: { show: true },//还原，复位原始图表
saveAsImage: { show: true }
保存图片（IE8-不支持），上图icon最右，可设置更多属性
- {string=} type 默认保存图片类型为'png'，需改为'jpeg'
- {string=} name 指定图片名称，如不指定，则用图表title标题，如无title标题则图片名称默认为“ECharts”
- {string=} lang 非IE浏览器支持点击下载，有保存话术，默认是“点击保存”，可修改
}
},
(3.3title)标题，每个图表最多仅有一个标题控件，每个标题控件可设主副标题。
https://echarts.baidu.com/echarts2/doc/doc.html#Title
title: {
text: DataStyle == "总人口" ? "珠三角地区人口柱状图" : "珠三角地区人口密度柱状图",
| {string} text | '' | 主标题文本，'\n'指定换行 |
x: 'center',
| {string | number} x | 'left' | 水平安放位置，默认为左侧，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px） |
padding: [22, 25, 25, 25]
| {number | Array} padding | 5 | 标题内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距，同css，见下图 |
},
(3.4grid)直角坐标系内绘图网格
https://echarts.baidu.com/echarts2/doc/doc.html#Grid
在 ECharts 2.x 里单个 echarts 实例中最多只能存在一个 grid 组件，在 ECharts 3 中可以存在任意个 grid 组件。
https://echarts.baidu.com/option.html#grid
grid: {
right: 300,
[ default: '10%' ]
grid 组件离容器右侧的距离。
left: 300
[ default: '10%' ]
grid 组件离容器左侧的距离。
left 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'left', 'center', 'right'。
},
(3.5textStyle)全局的字体样式。
https://echarts.baidu.com/option.html#textStyle
textStyle: {
fontWeight: 'bold',
文字字体的粗细,
可选：
'normal''bold''bolder''lighter'- 100 | 200 | 300 | 400...
fontSize: 14
[ default: 12 ]
文字的字体大小
},
(3.6 xAxis)直角坐标系 grid 中的 x 轴，一般情况下单个 grid 组件最多只能放上下两个 x 轴，多于两个 x 轴需要通过配置 offset 属性防止同个位置多个 x 轴的重叠。
https://echarts.baidu.com/option.html#xAxis
xAxis: {
type: 'category',
[ default: 'category' ]
坐标轴类型。
可选：
-
'value'数值轴，适用于连续数据。 -
'category'类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。 -
'time'时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。 -
'log'对数轴。适用于对数数据。
data: cityname,
xAxis.data[i] Object
类目数据，在类目轴（type: 'category'）中有效。
如果没有设置 type，但是设置了 axis.data，则认为 type 是 'category'。
如果设置了 type 是 'category'，但没有设置 axis.data，则 axis.data 的内容会自动从 series.data 中获取，这会比较方便。不过注意，axis.data指明的是 'category' 轴的取值范围。如果不指定而是从 series.data 中获取，那么只能获取到 series.data 中出现的值。比如说，假如 series.data 为空时，就什么也获取不到。
示例：
// 所有类目名称列表
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
// 每一项也可以是具体的配置项，此时取配置项中的 `value` 为类目名
data: [{
value: '周一',
// 突出周一
textStyle: {
fontSize: 20,
color: 'red'
}
}, '周二', '周三', '周四', '周五', '周六', '周日']name: '城市名称',
坐标轴名称。
axisTick: {//坐标轴刻度相关设置。
alignWithLabel: true
[ default: false ]
类目轴中在 boundaryGap 为 true 的时候有效，可以保证刻度线和标签对齐。如下图：
},
},
(3.7 yAxis)直角坐标系 grid 中的 y 轴，一般情况下单个 grid 组件最多只能放左右两个 y 轴，多于两个 y 轴需要通过配置 offset 属性防止同个位置多个 Y 轴的重叠。
https://echarts.baidu.com/option.html#yAxis
yAxis: {
type: 'value',
[ default: 'value' ]
坐标轴类型。
可选：
-
'value'数值轴，适用于连续数据。 -
'category'类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。 -
'time'时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。 -
'log'对数轴。适用于对数数据。
axisLabel: { interval: 0 },
坐标轴刻度标签的相关设置。
interval[ default: 'auto' ]
坐标轴刻度标签的显示间隔，在类目轴中有效。
默认会采用标签不重叠的策略间隔显示标签。
可以设置成 0 强制显示所有标签。
如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。
可以用数值表示间隔的数据，也可以通过回调函数控制。回调函数格式如下：
(index:number, value: string) => boolean
第一个参数是类目的 index，第二个值是类目名称，如果跳过则返回 false。
scale: true,
[ default: false ]
只在数值轴中（type: 'value'）有效。
是否是脱离 0 值比例。设置成 true 后坐标刻度不会强制包含零刻度。在双数值轴的散点图中比较有用。
name: DataStyle == "总人口" ? '人口数量（万人）' :'人口密度/(人/km2)',
坐标轴名称。
splitArea: {
show: true
}
坐标轴在 grid 区域中的分隔区域，默认不显示。
},
(3.8 visualMap)visualMap 是视觉映射组件，用于进行『视觉编码』，也就是将数据映射到视觉元素（视觉通道）。
https://echarts.baidu.com/option3.html#visualMap
visualMap: {
type: 'piecewise',
min: 0,
max: maxValue,
calculable: true,
realtime: false,
splitNumber: 6,
inRange: {
color: ['#9FFAC9', '#FCB66E', '#648AFB', '#AFFF6A', '#CC6EFD', '#FB7968']
},
outOfRange: {
color: ['white']
},
bottom: '15%',
left: 130
},
(3.9 series)系列列表。每个系列通过 type 决定自己的图表类型
https://echarts.baidu.com/option3.html#series
series: [
{
name:DataStyle=="总人口"? '城市人口':'城市人口密度',
type: 'bar',
data: population,
系列中的数据内容数组。数组项通常为具体的数据项。
通常来说，数据用一个二维数组表示。
https://echarts.baidu.com/option3.html#series-bar.data
当只有一个轴为类目轴（axis.type 为 'category'）的时候，数据可以简化用一个一维数组表示
xAxis: {
data: ['a', 'b', 'm', 'n']
},
series: [{
// 与 xAxis.data 一一对应。
data: [23, 44, 55, 19]
// 它其实是下面这种形式的简化：
// data: [[0, 23], [1, 44], [2, 55], [3, 19]]
}] itemStyle: {
emphasis: {
borderColor: '#333',
borderWidth: 1
}
},
progressive: 1000,
animation: false
}
]
(4)hideLoading
myChartHot.hideLoading();
//隐藏loading
(5)setOption
myChartHot.setOption(options);
2.【折线图】
series和上面的柱状图不同
var da = { name: "", type: "line", data: [] };
var seriesData1 = [];
for (var i = 0; i < cityname3.length; i++) {
var da = { name: cityname[i], type: "line", data: seriesData[cityname3[i]] };
seriesData1.push(da);
}
series: seriesData1
//[
// {
// name: '广州',
// type: 'line',
// //stack: '总量',
// data: seriesData["广州"]//[120, 132, 101, 134, 90, 230, 210]
// },
//{
// name: '深圳',
// type: 'line',
// //stack: '总量',
// data: seriesData["深圳"]//[220, 182, 191, 234, 290, 330, 310]
//},
//{
// name: '珠海',
// type: 'line',
// //stack: '总量',
// data: seriesData["珠海"]
//},
//{
// name: '佛山',
// type: 'line',
// data: seriesData["佛山"]
//},
//{
// name: '江门',
// type: 'line',
// data: seriesData["江门"]
//},
//{
// name: '东莞',
// type: 'line',
// //stack: '总量',
// data: seriesData["东莞"]
//},
//{
// name: '中山',
// type: 'line',
// //stack: '总量',
// data: seriesData["中山"]
//},
//{
// name: '惠州',
// type: 'line',
// //stack: '总量',
// data: seriesData["惠州"]
//},
//{
// name: '肇庆',
// type: 'line',
// //stack: '总量',
// data: seriesData["肇庆"]
//}
// ]
3.【地图】
https://echarts.baidu.com/option3.html#series-map
引入<script src="~/Areas/RemoteSenseMonitor/Content/Scripts/ECharts/mapchart/zhusanjiao.js"></script>
series中
type: 'map',
mapType: '广东',
data: datas
var da = { name: "", value: "" };//用name去匹配registerMap里的name
da.name = mssg[i].city+"市";
da.value = mssg[i].population == null ? 0 : mssg[i].population;
datas.push(da);