一、入门使用：
附上官方入门教程 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%', '60%'],//饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。
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,
backgroundColor: {//背景设置‘#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'
}
},本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
