echarts
echarts 简单介绍
echarts底层原理为canvas，其对canvas进行封装，暴露了简单的配置项，完成复杂数据可视化图表等的绘制。
echarts图表可以作为点缀，结合百度等 地图API 、svg 等实现炫酷的大数据统计展示。
echarts的实现原理导致了其有一个弊端，那就是对定制性太强的图表，或者特殊的事件处理无能为力，当然对于大多数情况都能满足需要，配置项的完整性、简单性都成为了大家喜欢它的理由，笔者本人也为echarts的头号粉丝，O(∩_∩)O哈哈~
echarts 使用 - - 初始化
- echarts官网：https://echarts.baidu.com/option.html#title
- echarts使用：
// 对图表进行重绘前的销毁，作用：使图表产生动态绘制效果 function checkEchart(myechart) { if(myechart != ''&&myechart != undefined) { myechart.dispose(); } }; var chartone; var charts = { chart1: function() { checkEchart(chartone); var lineOption = { /* * 图表的真正配置项，echarts详细配置项参考官网， * echarts使用模块，只展示当前图表的使用架构， * 经典案例模块不展示架构，只展示详细配置项，二者配合使用 * */ }； chartone = echarts.init(document.getElementById('图表div盒子的id')); chartone.setOption(lineOption); }, }; for(var key in charts) { // 调用其方法，并扩展其作用域（this指向）到window，不用apply也可以 charts[key].apply(); }; // 可以尝试去触发浏览器的resize方法，试试动态绘制效果 $(window).resize(function() { for(var key in charts) { charts[key].apply(); }; });
echarts 经典案例 - - 炫酷的柱状图
柱状图包含： 普通柱状图，堆叠柱状图（配置项手册service -> stack）等，下面主要展示普通柱状图&横向柱状图；
先上图片，接下来为详细配置项信息，结合 ‘echarts使用 - - 初始化’ 模块 配合开发
详细配置项：
var bar1Option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
shadowStyle: {
color: 'rgba(150,150,150,0.1)'
}
},
textStyle: {
color: '#fff',
fontSize: 12,
lineHeight: 16
},
backgroundColor: 'rgba(51,51,51,0.9)',
padding: (function() {
return parseInt($('html').css('font-size'))* 0.6;
})()
},
legend: {
show: false
},
grid: {
left: (function() {
return parseInt($('html').css('font-size'))*1.2
})(),
right: (function() {
return parseInt($('html').css('font-size'))*1.2
})(),
bottom: (function() {
return parseInt($('html').css('font-size'))*1.2
})(),
top: (function() {
return parseInt($('html').css('font-size'))*1.2
})(),
containLabel: true
},
xAxis: {
// 类目轴
type: 'category',
// 轴线
axisLine: { show: false },
// 轴刻度
axisTick: { show: false },
// 刻度文本
axisLabel: {
margin: 12,
color: '#999',
fontSize: (function() {
var fontSize = parseInt($('html').css('font-size'))*0.7;
if(fontSize < 12) {
return 12;
}else {
return fontSize;
}
})(),
align: 'center'
},
// 分割线
splitLine: { show: false },
data: ['03:30','04:00','04:30','05:00','05:30','06:00','06:30','07:00','07:30'],
},
yAxis: {
type: 'value',
splitNumber: 3,
// 轴线
axisLine: { show: false },
// 轴刻度
axisTick: { show: false },
// 刻度文本
axisLabel: {
margin: 12,
color: '#999',
fontSize: 12
},
// 分割线
splitLine: {
lineStyle: {
color: 'rgba(255,255,255,0.05)'
}
}
},
series: [{
name: '柱状图one',
type: 'bar',
barMinHeight:1,
barGap: '10%',
barMaxWidth: (function() {
return parseInt($('html').css('font-size'))*0.7
})(),
itemStyle: {
normal: {
// 渐变色
color: new echarts.graphic.LinearGradient(1,0,0,1,[
{offset:0,color:'rgba(255,12,12,1)'},
{offset:1,color:'rgba(255,190,74,1)'}
]),
// 圆角
barBorderRadius: 20
}
},
data:[15,20,7,22,17,13,19,12,22]
}];
}
横向柱状图
先上图片，接下来为详细配置项信息，结合 ‘echarts使用 - - 初始化’ 模块 配合开发
详细配置项：
var bar2Option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
shadowStyle: {
color: 'rgba(150,150,150,0.1)'
}
},
textStyle: {
color: '#fff',
fontSize: 12,
lineHeight: 16
},
backgroundColor: 'rgba(51,51,51,0.9)',
padding: (function() {
return parseInt($('html').css('font-size'))* 0.6;
})()
},
legend: {
show: false
},
grid: {
left: (function() {
return parseInt($('html').css('font-size'))*1.2
})(),
right: (function() {
return parseInt($('html').css('font-size'))*1.2
})(),
bottom: (function() {
return parseInt($('html').css('font-size'))*1.2
})(),
top: (function() {
return parseInt($('html').css('font-size'))*1.6
})(),
containLabel: true
},
xAxis: {
show: false
},
// 双 y轴 配置
yAxis: [{
name: 'text',
type: 'category',
position: 'left',
// 轴线
axisLine: { show: false },
// 轴刻度
axisTick: { show: false },
// 刻度文本
axisLabel: {
margin: 12,
color: '#fff',
fontSize: 16,
padding: [-35,0,0,0],
// label 格式化处理 & 自定义样式 rich 配置项
formatter: function(val) {
var str1 = val.split(" ")[0];
var str2 = val.split(" ")[1];
return str1 + '\n\n' + '{s|'+str2+'}';
},
rich: {
s: {
color: '#ccc',
fontSize:16
}
}
},
data: ['Top03 three','Top02 two','Top01 one']
},{
name: 'val',
type: 'category',
position: 'right',
// 轴线
axisLine: { show: false },
// 轴刻度
axisTick: { show: false },
// 刻度文本
axisLabel: {
margin: 12,
color: '#fff',
fontSize: 16
},
data: [15,20,45]
},],
series: [{
name: 'val',
type: 'bar',
barMinHeight:1,
barGap: '10%',
barMaxWidth: (function() {
return parseInt($('html').css('font-size'))*0.7
})(),
itemStyle: {
normal: {
// 单轴单颜色配置
color: function(params) {
var colorList = ['#EFE42A','#EE9201','#B74AE5'];
return colorList[params.dataIndex]
},
// 圆角
barBorderRadius: 20
}
},
data:[15,20,45]
}]
}
echarts 经典案例 - - 炫酷的折线图
折线图包含： 普通折现图，多线图、堆叠折线图等，下面主要展示堆叠折线图；
先上图片，接下来为详细配置项信息，结合 ‘echarts使用 - - 初始化’ 模块 配合开发
详细配置项：
var lineOption = {
tooltip: {
trigger: 'axis',
textStyle: {
color: '#fff',
fontSize: 12,
lineHeight: 16
},
backgroundColor: 'rgba(51,51,51,0.9)',
padding: (function() {
return parseInt($('html').css('font-size'))* 0.6;
})()
},
legend: {
show: false,
},
grid: {
left: (function() {
return parseInt($('html').css('font-size'))*1.2
})(),
right: (function() {
return parseInt($('html').css('font-size'))*1.2
})(),
bottom: (function() {
return parseInt($('html').css('font-size'))*1.2
})(),
top: (function() {
return parseInt($('html').css('font-size'))*1.2
})(),
containLabel: true
},
xAxis: {
type: 'category',
// 轴线
axisLine: { show: false },
// 轴刻度
axisTick: { show: false },
// 刻度文本
axisLabel: {
margin: 12,
color: '#999',
fontSize: (function() {
var fontSize = parseInt($('html').css('font-size'))*0.7;
if(fontSize < 12) {
return 12;
}else {
return fontSize;
}
})(),
align: 'center'
},
// 分割线
splitLine: { show: false },
data: ['2017-08','2017-09','2017-10','2017-11','2017-12','2018-01','2018-02','2018-03','2018-04','2018-05','2018-06'],
},
yAxis: {
type: 'value',
splitNumber: 3,
// 轴线
axisLine: { show: false },
// 轴刻度
axisTick: { show: false },
// 刻度文本
axisLabel: {
margin: 12,
color: '#999',
fontSize: 12
},
// 分割线
splitLine: {
lineStyle: {
color: 'rgba(255,255,255,0.05)'
}
}
},
series: [{
name: 'one',
type: 'line',
// 平滑曲线
smooth: true,
showSymbol: false,
lineStyle: {
normal: {
// 线宽
width: 3,
color: 'rgba(55,102,255,1)'
}
},
// 区域堆叠
areaStyle: {
normal: {
// 堆叠渐变色（第二种方式设置渐变色，第一种参考柱状图）
color: {
type: 'linear',
x: 0.5,
y: 1,
x2: 0.5,
y2: 0,
colorStops: [{
offset: 0, color: 'rgba(55,102,255,0)'
},{
offset: 1, color: 'rgba(55,102,255,0.3)'
}],
globalCoord: false
}
}
},
data: [60,50,70,50,60,50,70,50,60,50,60]
},{
name: 'two',
type: 'line',
smooth: true,
showSymbol: false,
lineStyle: {
normal: {
width: 3,
color: 'rgba(0,230,248,1)'
}
},
areaStyle: {
normal: {
color: {
type: 'linear',
x: 0.5,
y: 1,
x2: 0.5,
y2: 0,
colorStops: [{
offset: 0, color: 'rgba(0,230,248,0)'
},{
offset: 1, color: 'rgba(0,230,248,0.3)'
}],
globalCoord: false
}
}
},
data: [30,20,30,20,30,20,30,20,30,20,30]
}],
color: ['rgba(55,102,255,1)','rgba(0,230,248,1)']
}
echarts 经典案例 - - 炫酷的多环图
饼状图包含： 普通饼状图，环图、特殊饼状图、特殊环形图等，下面主要展示特殊环形图，其他图参考使用；
先上图片，接下来为详细配置项信息，结合 ‘echarts使用 - - 初始化’ 模块 配合开发
详细配置项：
var pieOption = {
tooltip: {
trigger: 'item',
textStyle: {
color: '#fff',
fontSize: 12,
lineHeight: 16
},
backgroundColor: 'rgba(51,51,51,0.9)',
padding: (function() {
return parseInt($('html').css('font-size'))* 0.6;
})(),
// 格式化提示框文本 b： item名称 d： 百分比
formatter: '{b}: <strong class="font16 light">{d}</strong> %'
},
legend: {
show: false,
},
// 采用单个环独立画法
series: [
{
name: 'one',
z: 2,
type: 'pie',
label: {
normal: {show: false}
},
// 环图半径
radius: ['48%','68%'],
center: ['50%','45%'],
// 环图开始角度
startAngle: 100,
hoverAnimation: false,
itemStyle: {
normal: {
// 当前item 样式
borderWidth: 3,
borderColor: '#0d2239',
borderType: 'solid'
}
},
data: [
{value:333, name: 'one',
label: {
normal: {
// 调整label展示
show: true,
color: '#fff',
lineHeight: 16,
padding: [0,0,0,-80],
fontSize: 20,
formatter: '{s|{b}} \n\n {d} %',
rich: {
s: {
color: '#ccc',
fontSize: 24,
padding: [0,0,0,10]
}
}
}
},
labelLine: {
normal: {
// label 线样式
show: true,
length: 50,
length2: 130,
lineStyle: {
color: '#aaa'
}
},
emphasis: {
show: true,
length: 50,
length2: 100,
lineStyle: {
color: '#aaa'
}
}
},
itemStyle: {
normal: {
// item 样式、渐变色
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 1,
colorStops: [{offset: 0,color: '#78fff3'},{offset: 1,color: '#21bdf5'}],
globalCoord: true
}
}
}
},
// 单环画法技巧，其他模块透明
{value:333, name: 'two',
itemStyle: {
normal: {
opacity: 0
}
}
},
// 单环画法技巧，其他模块透明
{value:334, name: 'three',
itemStyle: {
normal: {
opacity: 0
}
}
}
]
},
// 其他环画法与第一个单环画法一致
{
name: 'two',
z: 1,
type: 'pie',
label: {
normal: {show: false}
},
radius: ['54%','68%'],
center: ['50%','45%'],
startAngle: 100,
hoverAnimation: false,
itemStyle: {
normal: {
borderWidth: 3,
borderColor: '#0d2239',
borderType: 'solid'
}
},
data: [
{value:333, name: 'one',
itemStyle: {
normal: {
opacity: 0
}
}
},
{value:333, name: 'two',
itemStyle: {
normal: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 1,
colorStops: [{offset: 0,color: '#006dfc'},{offset: 1,color: '#5d9dff'}],
globalCoord: true
}
}
},
label: {
normal: {
show: true,
color: '#fff',
lineHeight: 16,
padding: [-40,0,0,-150],
fontSize: 20,
formatter: '{s|{b}} {d} %',
rich: {
s: {
color: '#ccc',
fontSize: 24
}
}
}
},
labelLine: {
normal: {
show: true,
length: 20,
length2: 180,
lineStyle: {
color: '#aaa'
}
},
emphasis: {
show: true,
length: 50,
length2: 100,
lineStyle: {
color: '#aaa'
}
}
},
},
{value:334, name: 'three',
itemStyle: {
normal: {
opacity: 0
}
}
}
]
},
{
name: 'three',
z: 1,
type: 'pie',
label: {
normal: {show: false}
},
radius: ['58%','68%'],
center: ['50%','45%'],
startAngle: 100,
hoverAnimation: false,
itemStyle: {
normal: {
borderWidth: 3,
borderColor: '#0d2239',
borderType: 'solid'
}
},
data: [
{value:333, name: 'one',
itemStyle: {
normal: {
opacity: 0
}
}
},
{value:333, name: 'two',
itemStyle: {
normal: {
opacity: 0
}
}
},
{value:334, name: 'three',
itemStyle: {
normal: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 1,
colorStops: [{offset: 0,color: '#7a68ff'},{offset: 1,color: '#ad37ff'}],
globalCoord: true
}
}
},
label: {
normal: {
show: true,
color: '#fff',
lineHeight: 16,
padding: [0,-80,0,0],
fontSize: 20,
formatter: '{s|{b}} \n\n {d} %',
rich: {
s: {
color: '#ccc',
fontSize: 24
}
}
}
},
labelLine: {
normal: {
show: true,
length: 60,
length2: 140,
lineStyle: {
color: '#aaa'
}
},
emphasis: {
show: true,
length: 50,
length2: 100,
lineStyle: {
color: '#aaa'
}
}
},
},
]
},
],
color: ['#78fff3','#006dfc','#7a68ff']
}
echarts 中的事件
-
用户鼠标操作图表图形时触发的事件；
// myChart 为图表实例 myChart.on('click',function(params) { // 控制台打印 params ，可以得到想要的数据，根据params，做不同的逻辑判断 } -
交互组件触发的事件；
- 例子 ： 图例组件开关对应的事件，如： 打开图例开关，我们想做什么…
// myChart 为图表实例 myChart.on('legendselectchanged',function(params) { // 图例开关响应的事件 console.log(params.selected); } - 例子： 用单选框按钮模拟图例组件开关，如： 选中单选框，执行图例组件选中时触发的事件
// 单选框选中时候，执行下面代码即可。 // myChart 为图表实例， myChart.dispatchAction({ type: 'legendSelect', // 'legendUnSelect' 'legendToggleSelect' name: string });
- 例子 ： 图例组件开关对应的事件，如： 打开图例开关，我们想做什么…
-
echarts 针对环形图 label 等无法监控点击事件（┭┮﹏┭┮，这个真心无奈）；
-
图表展示前动画
// myChart 为图表实例 myChart.showLoading(); myChart.hideLoading(); -
导出为图片
// myChart 为图表实例 myChart.getDataURL();
4323
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
