ECharts笔记
使用五步骤：
引入echart.js→准备显示的盒子→初始化echarts实例对象→准备配置项→将配置项设置给echarts实例对象
通用配置(所有配置项都可以添加）
// 标题
title: {
text: '期末语文成绩',
textStyle: {
color: 'skyblue',
},
borderWidth: 3,
borderColor: 'pink',
borderRadius: 10,
left: 50,
top: 20,
},
// 提示
tooltip: {
trigger: 'item',
triggerOn: 'click',
formatter: function (arg) {
return arg.name + '的成绩是' + arg.data
},
},
// 工具
toolbox: {
feature: {
saveAsImage: {}, //导出图片
dataView: {}, //数据视图(可操作)
magicType: { //动态类型切换(切换为其他视图)
type: ['bar', 'line'],
},
dataZoom: {}, //数据区域缩放
restore: {}, //重置视图
},
},
//筛选 配合series使用 data中的值就是series数组中每个对象的name值
直角坐标系的常用配置
var option = {
grid: {
show: true,
borderWidth: 10,
borderColor:'skyblue',
width:100,
height:80,
left:100,
top:100
},
xAxis: {
type: 'category',
data: xData,
position:'top'
},
yAxis: {
type: 'value',
position:'right'
},
//区域缩放
dataZoom: [
//start|end:数据窗口分为起始|结束百分比
{ type: 'slider', xAxisIndex: 0, start: 0, end: 0 },
{ type: 'slider', yAxisIndex: 0 },
],
}
柱状图
var xDataArr = [
'张三',
'李四',
'王五',
'闰土',
'小明',
'茅台',
'二妞',
'大强',
] // 准备x轴数据
var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86]
var yDataArr1 = [77, 82, 73, 67, 104, 80, 62, 96]
let option = {
legend: {
data: ['语文', '英语'],
},
xAxis: {
type: 'category',
data: xDataArr,
},
yAxis: {
type: 'value',
},
series: [
{
name: '语文',
type: 'bar',
data: yDataArr,
itemStyle: {
color: {
// 渐变方式
type: 'linear',
// 渐变方向
x: 0,
y: 0,
x2: 0,
y2: 1,
// 渐变区间及渐变颜色
colorStops: [
{ offset: 0, color: 'pink' },
{ offset: 1, color: 'skyblue' },
],
},
},
//标志点呈现最大最小值
markPoint: {
data: [
{ type: 'max', name: '最大值' },
{ type: 'min', name: '最小值' },
],
},
//标志线呈现平均值
markLine: {
data: [{ type: 'average', name: '平均值' }],
},
//数值显示属性
label: {
show: true,
rotate: 50,
position: 'top',
},
//柱宽
barWidth: '30%',
},
{
name: '英语',
type: 'bar',
data: yDataArr1,
},
],
}
折线图
let option = {
xAxis: {
type: 'category',
data: xDataArr,
//横轴第一个元素是否紧挨边缘
boundaryGap: false,
},
yAxis: {
type: 'value',
//纵轴脱离0值比例
scale: true,
},
series: [
{
name: '康师傅',
type: 'line',
data: yDataArr,
markPoint: {
data: [{ type: 'max' }, { type: 'min' }],
},
markLine: {
data: [{ type: 'average' }],
},
// 标注区间
markArea: {
data: [
[{ xAxis: '1月' }, { xAxis: '2月' }],
[{ xAxis: '7月' }, { xAxis: '9月' }],
],
},
//平滑折线
smooth: true,
// 折线样式
lineStyle: {
color: 'green',
type: 'dotted', //dashed dotted solid
},
//折线生成面积的样式
areaStyle: {},
//实现堆叠图
stack: 'all',
},
{
name: '统一',
type: 'line',
data: yDataArr1,
areaStyle: {},
//实现堆叠图
stack: 'all',
},
],
}
散点图[[],[],[]...]
data=[{},{}....] 数据
var axisData = []
for (var i = 0; i < data.length; i++) {
var height = data[i].height
var weight = data[i].weight
var newArr = [height, weight]
axisData.push(newArr)
}
console.log(axisData)
var mCharts = echarts.init(document.querySelector('div'))
var option = {
xAxis: {
type: 'value',
scale: true,
},
yAxis: {
type: 'value',
scale: true,
},
series: [
{
// type: 'scatter',
type: 'effectScatter', // 指明图表为带涟漪动画的散点图
showEffectOn: 'emphasis', // 出现涟漪动画的时机 render emphasis鼠标停滞上方时
rippleEffect: {
scale: 10, // 涟漪动画时, 散点的缩放比例
},
data: axisData,
// symbolSize: 30
symbolSize: function (arg) {
// 控制散点的大小
// console.log(arg)
var height = arg[0] / 100
var weight = arg[1]
// bmi = 体重kg / (身高m*身高m) 大于28,就代表肥胖
var bmi = weight / (height * height)
if (bmi > 28) {
return 20
}
return 5
},
itemStyle: {
// 控制散点的样式
color: function (arg) {
// console.log(arg)
var height = arg.data[0] / 100
var weight = arg.data[1]
// bmi = 体重kg / (身高m*身高m) 大于28,就代表肥胖
var bmi = weight / (height * height)
if (bmi > 28) {
return 'red'
}
return 'green'
},
},
},
],
}
饼图[{name:xx,value:yy},{name:xx,value:yy}...]
var option = {
series: [
{
type: 'pie',
data: pieData,
label: {
show: true,
formatter: function (arg) {
return (
'在' +
arg.name +
'花费了' +
arg.value +
'元 占比' +
arg.percent +
'%'
)
},
},
// radius: 40, 设置半径
// radius:["50%","75%"] //圆环图
roseType: 'radius', //南丁格尔图 根据半径据数值决定
selectedMode: 'single', //single|multiple 单个|多个选中偏移
selectedOffset: 30, //偏移量
},
],
}
地图基本操作
准备基础模板→准备地图数据→使用Ajax获取地图数据， 在Ajax的回调函数中, 往 echarts 全局对象注册地图的 json 数据→配置 geo 节点→将series下的数据与geo关联起来type: 'map',geoIndex: 0→结合visualMap实现控制
$.get('/map/china.json', function (ret) {
echarts.registerMap('chinaMap', ret)
let option = {
geo: {
type: 'map',
map: 'chinaMap',
roam: true, //设置允许缩放
label: {
show: true,
},
zoom: 1, //初始化缩放比例
/* center: [87.6, 43.79], 设置地图中心经纬度 */
},
series: [
{
type: 'map',
geoIndex: 0, //关联第一个geo
data: airData,
},
{
data: scatterDate,
type: 'effectScatter',
coordinateSystem: 'geo', //指明散点使用的坐标系统
rippleEffect: {
scale: 10,
},
},
],
visualMap: {
min: 0,
max: 300,
// 控制颜色渐变范围
inRange: {
color: ['white', 'red'],
},
// 范围控制
calculable: true,
},
}
mCharts.setOption(option)
})
雷达图
let HW = [80, 90, 80, 82, 90]
let ZX = [70, 80, 71, 77, 72]
let dataMax = [
{ name: '易用性', max: 100 },
{ name: '功能', max: 100 },
{ name: '拍照', max: 100 },
{ name: '跑分', max: 100 },
{ name: '续航', max: 100 },
]
let option = {
legend: {
data: ['华为手机', '中兴手机'],
},
radar: {
// 设置各个维度的最大值
indicator: dataMax,
// 指定雷达图形
shape:'circle'
},
series: [
{
data: [
{ name: '华为手机', value: HW },
{ name: '中兴手机', value: ZX },
],
type: 'radar',
label: {
show: true,
},
// 为雷达面积填充阴影
areaStyle:{}
},
],
}
仪表盘
let gaugeData = [{ value: 80,itemStyle:{color:'skyblue'}}, { value: 66,itemStyle:{color:'pink'}}]
let option = {
series: [
{
type: 'gauge',
data: gaugeData,
// 设置仪表盘数值范围
min:10,
max:90
},
],
}
图表自适应的实现
//监听窗口变化
window.onresize = function(){
mCharts.resize() //mCharts是图表实例变化
}
图表的动画
//加载动画
mCharts.showLoading()
//隐藏动画
mCharts.hideLOading()
//增量动画
通过事件产生新的option，然后setOption(新的option),新旧option会相互整合
//动画的配置
animation:true||false //开启关闭动画
animationDuration:2000 //动画持续时间
animationEasing:'linear' //缓动动画
animationThreshold:10 //动画元素的阈值 超过该值动画将不会显现
API
echarts方法：
echarts.connect([mCharts,mcharts2]) //将两个图表关联起来 比如保存图表1选项就可以图一图二一起保存
echarts实例方法：
/*事件绑定|解绑 on|off,
鼠标事件包括click、dbclick、mousedown、mousemove、mouseup
Echarts事件包括legendselectchanged、datazoom、pieselectchanged、mapselectchanged*/
mcharts.on|off('事件',function(arg){arg是包含事件信息的对象})
//主动触发事件dispatchAction
mcharts.dispatchAction({
type:'事件类型',
seriesIndex:'系列索引'
dataIndex:'数据索引'
})
//清空图表实例 可以重新mcharts.setOption(option)
mcharts.clear()
//清除图表实例 不可恢复
mcharts.dispose()