安装与引入
通过 npm 安装 ECharts
通过命令npm install echarts --save安装得到ECharts 和 zrender，存放在 node_modules 目录，直接在项目中运行代码 require(\'echarts\')得到 Echarts。
var echarts = require(\'echarts\');
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById(\'main\'));
// 绘制图表
myChart.setOption({
title: { text: \'ECharts 入门示例\' },
tooltip: {},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: \'销量\',
type: \'bar\',
data: [5, 20, 36, 10, 10, 20]
}]
});
也可以按需引入
Echarts元素
全局背景
// 全图默认背景
// backgroundColor: \'rgba(0,0,0,0)\',
// 默认色板
color: [\'#ff7f50\',\'#87cefa\',\'#da70d6\',\'#32cd32\',\'#6495ed\',
\'#ff69b4\',\'#ba55d3\',\'#cd5c5c\',\'#ffa500\',\'#40e0d0\',
\'#1e90ff\',\'#ff6347\',\'#7b68ee\',\'#00fa9a\',\'#ffd700\',
\'#6699FF\',\'#ff6666\',\'#3cb371\',\'#b8860b\',\'#30e0e0\'],
title
title: {
x: \'left\', // 水平安放位置，默认为左对齐，可选为：
// \'center\' ¦ \'left\' ¦ \'right\'
// ¦ {number}（x坐标，单位px）
y: \'top\', // 垂直安放位置，默认为全图顶端，可选为：
// \'top\' ¦ \'bottom\' ¦ \'center\'
// ¦ {number}（y坐标，单位px）
//textAlign: null // 水平对齐方式，默认根据x设置自动调整
backgroundColor: \'rgba(0,0,0,0)\',
borderColor: \'#ccc\', // 标题边框颜色
borderWidth: 0, // 标题边框线宽，单位px，默认为0（无边框）
padding: 5, // 标题内边距，单位px，默认各方向内边距为5，
// 接受数组分别设定上右下左边距，同css
itemGap: 10, // 主副标题纵向间隔，单位px，默认为10，
textStyle: {
fontSize: 18,
fontWeight: \'bolder\',
color: \'#333\' // 主标题文字颜色
},
subtextStyle: {
color: \'#aaa\' // 副标题文字颜色
}
}
legend
legend: {
orient: \'horizontal\', // 布局方式，默认为水平布局，可选为：
// \'horizontal\' ¦ \'vertical\'
x: \'center\', // 水平安放位置，默认为全图居中，可选为：
// \'center\' ¦ \'left\' ¦ \'right\'
// ¦ {number}（x坐标，单位px）
y: \'top\', // 垂直安放位置，默认为全图顶端，可选为：
// \'top\' ¦ \'bottom\' ¦ \'center\'
// ¦ {number}（y坐标，单位px）
backgroundColor: \'rgba(0,0,0,0)\',
borderColor: \'#ccc\', // 图例边框颜色
borderWidth: 0, // 图例边框线宽，单位px，默认为0（无边框）
padding: 5, // 图例内边距，单位px，默认各方向内边距为5，
// 接受数组分别设定上右下左边距，同css
itemGap: 10, // 各个item之间的间隔，单位px，默认为10，
// 横向布局时为水平间隔，纵向布局时为纵向间隔
itemWidth: 20, // 图例图形宽度
itemHeight: 14, // 图例图形高度
textStyle: {
color: \'#333\' // 图例文字颜色
}
}
grid
grid: {
x: 80,
y: 60,
x2: 80,
y2: 60,
// width: {totalWidth} - x - x2,
// height: {totalHeight} - y - y2,
backgroundColor: \'rgba(0,0,0,0)\',
borderWidth: 1,
borderColor: \'#ccc\'
}
dataRange（值域）
dataRange: {
orient: \'vertical\', // 布局方式，默认为垂直布局，可选为：
// \'horizontal\' ¦ \'vertical\'
x: \'left\', // 水平安放位置，默认为全图左对齐，可选为：
// \'center\' ¦ \'left\' ¦ \'right\'
// ¦ {number}（x坐标，单位px）
y: \'bottom\', // 垂直安放位置，默认为全图底部，可选为：
// \'top\' ¦ \'bottom\' ¦ \'center\'
// ¦ {number}（y坐标，单位px）
backgroundColor: \'rgba(0,0,0,0)\',
borderColor: \'#ccc\', // 值域边框颜色
borderWidth: 0, // 值域边框线宽，单位px，默认为0（无边框）
padding: 5, // 值域内边距，单位px，默认各方向内边距为5，
// 接受数组分别设定上右下左边距，同css
itemGap: 10, // 各个item之间的间隔，单位px，默认为10，
// 横向布局时为水平间隔，纵向布局时为纵向间隔
itemWidth: 20, // 值域图形宽度，线性渐变水平布局宽度为该值 * 10
itemHeight: 14, // 值域图形高度，线性渐变垂直布局高度为该值 * 10
splitNumber: 5, // 分割段数，默认为5，为0时为线性渐变
color:[\'#1e90ff\',\'#f0ffff\'],//颜色
//text:[\'高\',\'低\'], // 文本，默认为数值文本
textStyle: {
color: \'#333\' // 值域文字颜色
}
}
toolbox（工具栏）
toolbox: {
orient: \'horizontal\', // 布局方式，默认为水平布局，可选为：
// \'horizontal\' ¦ \'vertical\'
x: \'right\', // 水平安放位置，默认为全图右对齐，可选为：
// \'center\' ¦ \'left\' ¦ \'right\'
// ¦ {number}（x坐标，单位px）
y: \'top\', // 垂直安放位置，默认为全图顶端，可选为：
// \'top\' ¦ \'bottom\' ¦ \'center\'
// ¦ {number}（y坐标，单位px）
color : [\'#1e90ff\',\'#22bb22\',\'#4b0082\',\'#d2691e\'],
backgroundColor: \'rgba(0,0,0,0)\', // 工具箱背景颜色
borderColor: \'#ccc\', // 工具箱边框颜色
borderWidth: 0, // 工具箱边框线宽，单位px，默认为0（无边框）
padding: 5, // 工具箱内边距，单位px，默认各方向内边距为5，
// 接受数组分别设定上右下左边距，同css
itemGap: 10, // 各个item之间的间隔，单位px，默认为10，
// 横向布局时为水平间隔，纵向布局时为纵向间隔
itemSize: 16, // 工具箱图形宽度
featureImageIcon : {}, // 自定义图片icon
featureTitle : {
mark : \'辅助线开关\',
markUndo : \'删除辅助线\',
markClear : \'清空辅助线\',
dataZoom : \'区域缩放\',
dataZoomReset : \'区域缩放后退\',
dataView : \'数据视图\',
lineChart : \'折线图切换\',
barChart : \'柱形图切换\',
restore : \'还原\',
saveAsImage : \'保存为图片\'
}
}
tooltip（提示框）
tooltip: {
trigger: \'item\', // 触发类型，默认数据触发，见下图，可选为：\'item\' ¦ \'axis\'
showDelay: 20, // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
hideDelay: 100, // 隐藏延迟，单位ms
transitionDuration : 0.4, // 动画变换时间，单位s
backgroundColor: \'rgba(0,0,0,0.7)\', // 提示背景颜色，默认为透明度为0.7的黑色
borderColor: \'#333\', // 提示边框颜色
borderRadius: 4, // 提示边框圆角，单位px，默认为4
borderWidth: 0, // 提示边框线宽，单位px，默认为0（无边框）
padding: 5, // 提示内边距，单位px，默认各方向内边距为5，
// 接受数组分别设定上右下左边距，同css
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : \'line\', // 默认为直线，可选为：\'line\' | \'shadow\'
lineStyle : { // 直线指示器样式设置
color: \'#48b\',
width: 2,
type: \'solid\'
},
shadowStyle : { // 阴影指示器样式设置
width: \'auto\', // 阴影大小
color: \'rgba(150,150,150,0.3)\' // 阴影颜色
}
},
textStyle: {
color: \'#fff\'
}
}
xAxis
xAxis : [
{
type : \'category\',
axisLine: {
symbol: [\'none\', \'arrow\'], //设置x轴或y轴箭头
lineStyle: {
color: \'#B5B5B5\',
width: 2, //这里是为了突出显示加上的
}
},
//刻度是向内还是向外
axisTick:{
inside:true,
length:1,
},
splitLine: {
show: true,
lineStyle: {
type: \'solid\',
color:\'#FCFCFC\',//网格颜色
}
},
axisLabel:{ //调整x轴的lable
//interval:0, //按x轴的长度显示的刻度的个数 例如：本来显示20个刻度，因为x轴端只显示了10个，
rotate:0, //实现x轴的刻度的标识实现旋转，
textStyle:{
fontSize:10,// 让字体变大
color:"#B5B5B5"
}
},
name: "(日期)",
nameTextStyle: {
color: "#B5B5B5",
verticalAlign: "bottom",
fontSize:\'10\',
padding:[35,50,10,-2] //设置x轴的标题的位置
},
boundaryGap : false,
data:[\'2016-01\',\'2016-07\',\'2016-08\',\'2016-09\']
// data : [\'周一\',\'周二\',\'周三\',\'周四\',\'周五\',\'周六\',\'周日\']
}
]
yAxis
yAxis : [
{
type : \'VALUE\',
splitNumber:2,//所以将 splitNumber设成3
axisLine: {
symbol: [\'none\', \'arrow\'],
lineStyle: {
color: \'#B5B5B5\',
width: 2, //这里是为了突出显示加上的
}
},
splitLine: {
show: true,
lineStyle: {
type: \'solid\',//
color:\'#FCFCFC\'///网格颜色
}
},
//刻度是向内还是向外
axisTick:{
inside:true,
length:1,
},
axisLabel:{ //调整x轴的lable
textStyle:{
fontSize:10,// 让字体变大
color:"#B5B5B5"
}
},
name: "(人数)",
nameLocation:"end", //实现标题显示的位置
nameTextStyle:{
color: "#B5B5B5",
fontSize:10,
// verticalAlign: \'top\',
// align:"left",
padding:[50,0,-6,0]
},
//axisLine : {onZero: false},
/* boundaryGap : false,
axisLabel : {
formatter: \'{value} \'
},
data:[\'AA-\',\'AA\',\'AA+\']*/
}
]
类似温湿度的两个y轴可以采用以下代码
yAxis: [ //Y轴（这里我设置了两个Y轴，左右各一个）
{
//第一个（左边）Y轴，yAxisIndex为0
type: \'value\',
name: \'温度\',
max: 120,
min: 0,
axisLabel: {
formatter: \'{value} ℃\' //控制输出格式
},
splitLine: {
show: false
}
},
{
//第二个（右边）Y轴，yAxisIndex为1
type: \'value\',
name: \'湿度\',
max: 100,
min: 0,
scale: true,
axisLabel: {
formatter: \'{value} %\'
},
splitLine: {
show: false
}
}
]
在series属性中插入以下的代码yAxisIndex: \'1\'即可准确表示。
timeLine（时间轴）
第一种
timeline:{
axisType :\'category\',
orient:\'vertical\',
autoPlay :true,
playInterval :15000,
right: \'5\',
left:\'320\',
top:\'0\',
bottom:\'0\',
label:{
interval:0,
formatter: function (item) {
var str = item.split("-")[1];
return parseInt(str)+\'月\';
}
},
data:monthArr,
currentIndex : index,
controlStyle:{
showPlayBtn :false
}
}
第二种
timeline: {
show: true,
axisType: \'category\',
autoPlay: true,
currentIndex: 5,
playInterval: 5000,
symbolSize: 12,
checkpointStyle: {
symbol: \'circle\',
symbolSize: 18,
color: \'#00d3e7\',
borderWidth: 2,
borderColor: "#00d3e7"
}
dataZoom组件
dataZoom:[ //区域缩放
{
id: \'dataZoomX\',
show:true, //是否显示 组件。如果设置为 false，不会显示，但是数据过滤的功能还存在。
backgroundColor:"rgba(47,69,84,0)", //组件的背景颜色
type: \'slider\', //slider表示有滑动块的，inside表示内置的
dataBackground:{ //数据阴影的样式。
lineStyle:mylineStyle, //阴影的线条样式
areaStyle:myareaStyle, //阴影的填充样式
},
fillerColor:"rgba(167,183,204,0.4)", //选中范围的填充颜色。
borderColor:"#ddd", //边框颜色。
filterMode: \'filter\', //\'filter\'：当前数据窗口外的数据，被 过滤掉。即 会 影响其他轴的数据范围。每个数据项，只要有一个维度在数据窗口外，整个数据项就会被过滤掉。
//\'weakFilter\'：当前数据窗口外的数据，被 过滤掉。即 会 影响其他轴的数据范围。每个数据项，只有当全部维度都在数据窗口同侧外部，整个数据项才会被过滤掉。
//\'empty\'：当前数据窗口外的数据，被 设置为空。即 不会 影响其他轴的数据范围。
//\'none\': 不过滤数据，只改变数轴范围。
xAxisIndex:0, //设置 dataZoom-inside 组件控制的 x轴,可以用数组表示多个轴
yAxisIndex:[0,2], //设置 dataZoom-inside 组件控制的 y轴,可以用数组表示多个轴
radiusAxisIndex:3, //设置 dataZoom-inside 组件控制的 radius 轴,可以用数组表示多个轴
angleAxisIndex:[0,2], //设置 dataZoom-inside 组件控制的 angle 轴,可以用数组表示多个轴
start: 30, //数据窗口范围的起始百分比,表示30%
end: 70, //数据窗口范围的结束百分比,表示70%
startValue:10, //数据窗口范围的起始数值
endValue:100, //数据窗口范围的结束数值。
orient:"horizontal", //布局方式是横还是竖。不仅是布局方式，对于直角坐标系而言，也决定了，缺省情况控制横向数轴还是纵向数轴。\'horizontal\'：水平。\'vertical\'：竖直。
zoomLock:false, //是否锁定选择区域（或叫做数据窗口）的大小。如果设置为 true
则锁定选择区域的大小，也就是说，只能平移，不能缩放。
throttle:100, //设置触发视图刷新的频率。单位为毫秒（ms）。
zoomOnMouseWheel:true, //如何触发缩放。可选值为：true：表示不按任何功能键，鼠标滚轮能触发缩放。false：表示鼠标滚轮不能触发缩放。\'shift\'：表示按住 shift 和鼠标滚轮能触发缩放。\'ctrl\'：表示按住 ctrl 和鼠标滚轮能触发缩放。\'alt\'：表示按住 alt 和鼠标滚轮能触发缩放。
moveOnMouseMove:true, //如何触发数据窗口平移。true：表示不按任何功能键，鼠标移动能触发数据窗口平移。false：表示鼠标滚轮不能触发缩放。\'shift\'：表示按住 shift 和鼠标移动能触发数据窗口平移。\'ctrl\'：表示按住 ctrl 和鼠标移动能触发数据窗口平移。\'alt\'：表示按住 alt 和鼠标移动能触发数据窗口平移。
left:"center", //组件离容器左侧的距离,\'left\', \'center\', \'right\',\'20%\'
top:"top", //组件离容器上侧的距离,\'top\', \'middle\', \'bottom\',\'20%\'
right:"auto", //组件离容器右侧的距离,\'20%\'
bottom:"auto", //组件离容器下侧的距离,\'20%\'
},
{
id: \'dataZoomY\',
type: \'inside\',
filterMode: \'empty\',
disabled:false, //是否停止组件的功能。
xAxisIndex:0, //设置 dataZoom-inside 组件控制的 x轴,可以用数组表示多个轴
yAxisIndex:[0,2], //设置 dataZoom-inside 组件控制的 y轴,可以用数组表示多个轴
radiusAxisIndex:3, //设置 dataZoom-inside 组件控制的 radius 轴,可以用数组表示多个轴
angleAxisIndex:[0,2], //设置 dataZoom-inside 组件控制的 angle 轴,可以用数组表示多个轴
start: 30, //数据窗口范围的起始百分比,表示30%
end: 70, //数据窗口范围的结束百分比,表示70%
startValue:10, //数据窗口范围的起始数值
endValue:100, //数据窗口范围的结束数值。
orient:"horizontal", //布局方式是横还是竖。不仅是布局方式，对于直角坐标系而言，也决定了，缺省情况控制横向数轴还是纵向数轴。\'horizontal\'：水平。\'vertical\'：竖直。
zoomLock:false, //是否锁定选择区域（或叫做数据窗口）的大小。如果设置为 true 则锁定选择区域的大小，也就是说，只能平移，不能缩放。
throttle:100, //设置触发视图刷新的频率。单位为毫秒（ms）。
zoomOnMouseWheel:true, //如何触发缩放。可选值为：true：表示不按任何功能键，鼠标滚轮能触发缩放。false：表示鼠标滚轮不能触发缩放。\'shift\'：表示按住 shift 和鼠标滚轮能触发缩放。\'ctrl\'：表示按住 ctrl 和鼠标滚轮能触发缩放。\'alt\'：表示按住 alt 和鼠标滚轮能触发缩放。
moveOnMouseMove:true, //如何触发数据窗口平移。true：表示不按任何功能键，鼠标移动能触发数据窗口平移。false：表示鼠标滚轮不能触发缩放。\'shift\'：表示按住 shift 和鼠标移动能触发数据窗口平移。\'ctrl\'：表示按住 ctrl 和鼠标移动能触发数据窗口平移。\'alt\'：表示按住 alt 和鼠标移动能触发数据窗口平移。
}
]
series
series: [
{
name: \'温度（℃）\',
type: \'line\', //折线图表示（生成温度曲线）
symbol: \'emptycircle\', //设置折线图中表示每个坐标点的符号；emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形
stack: 总量, //写一样会有累加的效果
areaStyle: {},
markPoint: {
data: [
{type: \'max\', name: \'最大值\'},
{type: \'min\', name: \'最小值\'}
]
}//面积的阴影
data: [110, 20, 56, 36, 96, 58, 25], //数据值通过Ajax动态获取
},
{
name: \'湿度（%）\',
yAxisIndex: \'1\', //定位到第二个坐标轴
type: \'line\',
symbol: \'emptyrect\',
data: [45, 63, 10, 62, 35, 88, 66]
},]
Echarts 设置
异步数据加载
第一种
var myChart = echarts.init(document.getElementById(\'main\'));
$.get(\'data.json\').done(function (data) {
myChart.setOption({
title: {
text: \'异步数据加载示例\'
},
tooltip: {},
legend: {
data:[\'销量\']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: \'销量\',
type: \'bar\',
data: [5, 20, 36, 10, 10, 20]
}]
});
});
第二种
var myChart = echarts.init(document.getElementById(\'main\'));
// 显示标题，图例和空的坐标轴
myChart.setOption({
title: {
text: \'异步数据加载示例\'
},
tooltip: {},
legend: {
data:[\'销量\']
},
xAxis: {
data: []
},
yAxis: {},
series: [{
name: \'销量\',
type: \'bar\',
data: []
}]
});
// 异步加载数据
$.get(\'data.json\').done(function (data) {
// 填入数据
myChart.setOption({
xAxis: {
data: data.categories
},
series: [{
// 根据名字对应到相应的系列
name: \'销量\',
data: data.data
}]
});
});
loading动画
myChart.showLoading();
$.get(\'data.json\').done(function (data) {
myChart.hideLoading();
myChart.setOption(...);
});
此文章部分搬运，部分原创，但由于多次修稿，搬运的地址遗失，如有侵权，麻烦联系我的邮箱。