一、入门使用:
附上官方入门教程Documentation - Apache ECharts 教程分三步没什么好简化的。让我们在这里谈谈预防措施
1.下载echarts
下载echarts当您可以根据需要下载单独的文件或整个源代码包时，源代码包含更全面的内容，但我需要下载源代码包的地图
2.echarts引用
老版本的echarts引入比较复杂，建议直接使用新版本(具体旧版本是哪个版本我忘了...）,官网下载最新就好了。
3.绘制图表
绘制图表时，需要创建固定宽度和高度的图表dom 附上官方提供的示例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="echarts.min.js></script> </head> <body> <!-- 为ECharts准备一个大小(宽高)的人Dom --> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基于准备dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { title: { text: 'ECharts 入门示例' }, tooltip: {}, legend: { data:[销量] }, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; // 使用新指定的配置项和数据显示图。 myChart.setOption(option); </script> </body> </html>二、常用配置
1.绘制统计图
确定图表的生成dom节点 var myChart = echarts.init(document.getElementById('main')); getElementById里是dom的id 然后是统计图的配置var option = {……}, 最后是绘制myChart.setOption(option); 而且每个统计图生成的时候都会有这三个部分，所以同类型的统计图可以生成包装成一种方法，避免了多个统计图一直命名的问题。
2.必要的配置项
若无坐标轴图，series项目必不可少，series里type和data必不可少。
series: [ { type: 'pie', data: [ {value: 335, name: 直接访问， {value: 310, name: 邮件营销， ], } ]除了坐标轴，如果有坐标轴series外，xAxis和yAxis也是必要的，xAxis为X轴配置信息，yAxis为y轴配置信息。
xAxis: [ { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], } ], yAxis: [ { type: 'value' } ], series: [ { type: 'bar', data: [10, 52, 200, 334, 390, 330, 220] } ]3.常用示例及配置项注释
饼图
series: [ { name: ////tooltip里的{a}，即鼠标移入提示框中的标题 type: 'pie，//类型 radius: '55%',//[0,’55%’]/’55%’两种写法,[0,‘55%’]0为内半径，挖空尺寸大于0即环形图，‘55%’为外半径；只写‘55%’为纯饼图 center: ['50%', 数组的第一项是横坐标，第二项是纵坐标。 data: [//值 {value: 335, name: 直接访问， {value: 310, name: 邮件营销， {value: 234, name: 联盟广告， {value: 135, name: 视频广告， {value: 1548, name: 搜索引擎} ], } ]柱状图
var option = { grid: {///边距以x轴和外轴为标准 left:50, top:75, bottom:30, right:30, }, xAxis: { type: 'value',//‘value’为值'category'为类目，type柱状图是横向还是纵向决定 name:单位:个，//坐标轴名称 nameLocation:’end，//名称位置start、middle/center、end对应坐标轴的开始位置、中间位置和结束位置，start和middle容易与刻度值重叠 axisLine:{///坐标轴 lineStyle:{///坐标轴样式 color:'#fff' } }, splitLine:{// 坐标轴在 grid 区域中的分隔线。 show:false, }, axisTick:{//坐标轴刻度线 show:false, alignWithLabel:true,//刻度是否与标签对齐，true为对齐 length:5.//刻度长度 }, axisLabel:{ ///坐标轴刻度标签 margin:18, //// fontFamily:'Adobe 黑体 Std', color:'#c8d7dc', fontSize:14, rotate:45.//尺度标签旋转角度 } }, yAxis: {//y轴配置项与x轴相同 // gridIndex:1, type: 'category', data: 大众汽车， 长城汽车， '海科', 奔驰汽车， 高德， splitLine:{ show:false, }, axisLine:{ lineStyle:{ color:'#fff' } }, axisTick:{ show:false }, axisLabel:{ fontFamily:'Adobe 黑体 Std', fontSize:14, color:'#c8d7dc', } }, series: [ { name: '2011年', type: 'bar', label:{///图形上的文本标签 show:true, position:‘top，//标签位置，常用的有top、insideBottom和inside distance: 15.//距离图形元素，positon为inside时不生效 color:’#fff’ ,//文字颜色，以下是常用的文本设置 fontStyle: "normal", fontWeight: "bold", fontSize: 14, align: "center", verticalAlign: "bottom", textBorderColor: "rgba(57, 41, 41, 1)" , textBorderWidth: 2, textShadowColor: "rgba(0, 0, 0, 1)" , textShadowBlur: 7.5, textShadowOffsetX: 5, textShadowOffsetY: 3, backgroundColr: {//背景设置‘#fff’可直接设置背景色,{image:}可设置背景图
image: "xxx/xxx/xxx.png",
},
borderWidth: 1, //文字块边框宽度
borderColor: "rgba(33, 27, 27, 1)" , //文字块边框颜色
padding: [5, 19, 5, 19] , //文字块内边距，上右下左
},
barWidth: 18,//柱条的宽度，不设时自适应。
data: [18203, 23489, 29034, 104970, 131744]
},
]
};地图
var myChart = echarts.init(document.getElementById(id),theme);
myChart.showLoading();//统计图加载动画
$.get('js/map/json/province/jiangsu.json', function (geoJson) {//引入地图文件，在源码包的map文件夹下有各省份、中国和世界地图
myChart.hideLoading();//关闭加载动画
echarts.registerMap('jiangsu', geoJson);
var option = {
visualMap: {//图例设置，可根据值给区域赋颜色
min: 800,
max: 50000,
text: ['High', 'Low'],
realtime: false,
calculable: true,
inRange: {
color: [ '#1f2c5b','#294594']
}
},
series: [
{
name: '物联网卡全省分布',
type: 'map',
mapType: 'jiangsu', // 自定义扩展图表类型
label: {
show: true,
position: ['50%', '50%'],
color:'#d6bc46',
fontSize:18,
fontWeight:'bold'
},
itemStyle:{
areaColor:'#294594',
borderColor:'#00c7f0'
},
data: [//各区域及赋值，不同省份对应的区域不同，可以百度搜索或者查看json文件的信息，百度可能更方便
{name: '徐州市', value: 20057.34},
{name: '宿迁市', value: 15477.48},
{name: '连云港市', value: 31686.1},
{name: '淮安市', value: 6992.6},
{name: '盐城市', value: 44045.49},
{name: '扬州市', value: 37659.78},
{name: '泰州市', value: 45180.97},
{name: '南京市', value: 55204.26},
{name: '镇江市', value: 21900.9},
{name: '常州市', value: 4918.26},
{name: '无锡市', value: 5881.84},
{name: '苏州市', value: 4178.01},
{name: '南通市', value: 806.98}
],
}
]
};
myChart.setOption(option);公用
legend: {
orient: 'vertical',//图例列表的布局朝向。Vertical竖向排列。Horizontal水平排布列
right: 45,//边距left、top、right、bottom
bottom:50,
data: ['车辆服务', '智能抄表', '移动媒体', '生产环境'],//值
icon:'circle',// 图例项的 icon，常用的有'circle','rect', 'roundRect','triangle','pin'或者用'image://http://xxx.xxx.xxx/a/b.png'的形式，用png或者svg显示图例
textStyle: {
// color:['#105b6e', '#5ab1ef', '#ffb980', '#d87a80','#000']
color:'#feffff'
}
},
tooltip: {
trigger: 'item',//item主要在无类目轴的图表中使用（如散点图、饼图），axis用在有类目轴的图表中使用（如柱状图）
formatter: '{b}<br/>{c} (p / km2)',
//模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等。 在 trigger 为 'axis' 的时候，会有多个系列的数据，此时可以通过 {a0}, {a1}, {a2} 这种后面加索引的方式表示系列的索引。 不同图表类型下的 {a}，{b}，{c}，{d} 含义不一样。 其中变量{a}, {b}, {c}, {d}在不同图表类型下代表数据含义为：
//折线（区域）图、柱状（条形）图、K线图 : {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）
//散点图（气泡）图 : {a}（系列名称），{b}（数据名称），{c}（数值数组）, {d}（无）
//地图 : {a}（系列名称），{b}（区域名称），{c}（合并数值）, {d}（无）
//饼图、仪表盘、漏斗图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
},主题
最后说一下主题 可以自定义一组主题颜色，这个是一组渐变色
var theme = {
color:{
type: 'linear',
x: 1,
y: 0,
x2: 0,
y2: 0,
colorStops: [{
offset: 0, color: '#00c7f0' // 0% 处的颜色
}, {
offset: 1, color: '#1c2d53' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
},
}一组纯色
var theme = {
color:[ '#1f2c5b','#294594']
}使用方法：
var myChart = echarts.init(document.getElementById(id),theme);对应的图例文字颜色可设置为主题颜色或统一一个颜色
legend: {
orient: 'vertical',
right: 45,
bottom:50,
data: icon_list,
icon:'circle',
textStyle: {
// color:['’, '', '', '','']
color:'#feffff'
}
},