官网：echarts.apache.org/zh/index.ht…
1.1 ECharts的基本使用
1.引入echarts
2.准备显示的div
3.初始化 echarts 实例对象
4.准备配置项
5.将配置项设置给 echarts 实例对象
实例：这里是基于vue2脚手架初始化的
npm install echarts //安装echarts
main.js
import * as echarts from 'echarts'; //第一步引入echarts
Vue.prototype.$echarts =echarts //挂载到Vue实例对象上，这样所有组件通过this.$echarts使用
xxx.vue
<template>
<div style="width:500px;height: 300px" ref="main"></div> //第二步 准备显示的div
</template>
export default {
mounted() {
let myChart = this.$echarts.init(this.$refs.main) //第三步初始化echarts实例对象
var option = { //第四步准备配置项
xAxis: {
data: ["foo","bar","tom"]
},
yAxis: {},
series: [{
type: 'bar',
data: [5, 10, 15]
}]
};
myChart.setOption(option); // 第五步将配置项设置给 echarts 实例对象。
}
}
</script>
2.1 option配置项
官方文档：echarts.apache.org/zh/option.h…
//具体要配置什么需要参考官方文档
xAxis: { //直角坐标系 grid 中的 x 轴
type: 'category', //坐标轴类型
data: ["foo","bar","tom"] //类目数据
},
yAxis: {}, //直角坐标系 grid 中的 y 轴
series: [{
type: 'bar', //系列,控制显示什么形状
data: [5, 10, 15]
}]
3.1 通用配置
3.1.1
//title：标题
var option = {
title: {
text: "我是辩题", // 标题文字
textStyle: {
color: 'red' // 文字颜色
},
borderWidth: 5, // 标题边框
borderColor: 'green', // 标题边框颜色
borderRadius: 5, // 标题边框圆角
left: 20, // 标题的位置
top: 20 // 标题的位置
}
}
3.1.2 tooltip
//tooltip:提示框
tooltip:{
trigger:'item',//触发类型,可选值有item\axis
triggerOn:'click', //触发时机,可选值有 mouseOver\click
// formatter:'{a}{b}' //格式化显示,可选值有 字符串模板\回调函数,具体参考文档
formatter:function (arg) {
return arg.name
}
}
3.1.3 toolbox
//toolbox:工具按钮
toolbox: {
feature: {
saveAsImage: {}, // 将图表保存为图片
dataView: {}, // 是否显示出原始数据
restore: {}, // 还原图表
dataZoom: {}, // 数据缩放
magicType: { // 将图表在不同类型之间切换,图表的转换需要数据的支持
type: ['bar', 'line']
}
}
}
3.1.4 legend
//legend:是图例,用于筛选类别,需要和 series 配合使用
legend:{
data:['项目1','项目2'] //data里面的配置必须和series的name一致
},
series: [
{
name:'项目1',
type: 'bar',
data: [5, 10, 15]
},
{
name:'项目2',
type: 'bar',
data: [3, 6, 9]
}
]
4.1 Gird
直角坐标系：只针对柱状图，折线图，散点图有效
//1.控制坐标轴的大小，位置等
var option = {
grid: {
show: true, // 显示grid
borderWidth: 10, // grid的边框宽度
borderColor: 'red', // grid的边框颜色
left: 100, // grid的位置
top: 100,
width: 300, // grid的大小
height: 150
}
}
//2.控制坐标轴的方向
//坐标轴类型 type
//value : 数值轴, 自动会从目标数据中读取数据
//category : 类目轴, 该类型必须通过 data 设置类目数据
var option = {
xAxis: {
type: 'category',
data: xDataArr,
position: 'top' //top或bottom
},
yAxis: {
type: 'value',
position: 'right' //right或left
}
}
// 3.区域缩放 dataZoom
var option = {
dataZoom: [
{
type: 'slider',//slider : 滑块 inside:依靠鼠标滚轮或者双指缩放
xAxisIndex: 0 //设置缩放组件控制的是哪个 x 轴, 一般写0即可
},
{
type: 'slider',
yAxisIndex: 0,//设置缩放组件控制的是哪个y轴, 一般写0即可
start: 0,//数据窗口范围的起始百分比
end: 80 //数据窗口范围的结束百分比
}
]
}
5.1 基本图形
以下所以配置都是配置项的操作
5.1.1 柱状图
var option = {
xAxis: {
type: 'category',
data: ["foo","bar","tom"]
},
yAxis: {},
series: [{
type: 'bar',
data: [5, 10, 15]
}]
};
常用效果：
series: [{
type: 'bar',
data: [5, 10, 15],
markPoint:{ //1. 设置最大值和最小值
data:[
{type:'max',name:'最大值'},
{type:'min',name:'最小值'},
]
},
markLine:{ //2. 设置平均值
data:[
{type:'average',name:'平均值'}
]
},
label:{ //3. 设置是否显示数值以及样式
show:true,
position:'top'
},
barWidth:'60%' //4. 设置柱状图的宽度
}]
5.1.2 折线图
let option = {
xAxis: {
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月']
},
yAxis: {
type: 'value'
},
series: [
{
type: 'line', //line代表折线图
data: [3000, 2800, 900, 1000, 800, 700, 1400, 1300]
}
]
}
常用效果：
//最大值和最小值：与柱状图设置一样
series: [
{
markArea:{ //1.标注区间
data:[
[
{xAxis: '1月'},
{xAxis: '2月'},
],
[
{xAxis: '6月'},
{xAxis: '7月'},
]
]
}，
smooth: true, //2.平滑线条
lineStyle: { //3.线条样式
color: 'green',
type: 'dashed' // 可选值还有 dotted solid
},
areaStyle: { //4.填充风格
color: 'pink'
}
}
]
xAxis: {
type: 'category',
data: xDataArr,
boundaryGap: false //5.紧挨边缘 这是在xAxis中设置
}
yAxis: {
type: 'value',
scale: true //6.缩放, 脱离0值比例(y轴不从零开始) 这是在yAxis中设置
}
var option = {
series: [
{
type: 'line',
data: yDataArr1,
stack: 'all' //7.堆叠图 series中的每一个对象配置相同的stack值, 这个all可以任意写
},
{
type: 'line',
data: yDataArr2,
stack: 'all'
}
]
}
5.1.3 散点图
let option = {
xAxis: {
type: 'value'
},
yAxis: {
type: 'value'
},
series: [
{
type: 'scatter',
data: [ //这是数据是二维数组
[180,80],
[170,70],
[160,60],
]
}
]
}
常见效果：
series: [
{
type: 'scatter',
//type:effectScatter 3.涟漪动画效果
/*rippleEffect:{ 配置涟漪动画的大小
scale:3
},
showEffectOn: 'emphasis',*/ //配置涟漪动画显示时机 render 和 emphasis
data: [ //这是数据是二维数组
[180,80],
[170,70],
[160,60],
],
symbolSize: 25, //1. 控制散点的大小 可以接收回调函数来控制
itemStyle: { //2.控制散点的颜色 可以接收回调函数来控制
color: 'green',
}
}
]
5.1.4 饼图
//没有 xAxis 和 yAxis
let option = {
series: [
{
type: 'pie',
data: [ //data里面是一个个对象
{value: 11231,name: "foo"},
{value: 22673,name: "bar"}
]
}
]
}
常见效果：
series: [
{
type: 'pie',
data: [
{value: 11231,name: "foo"},
{value: 22673,name: "bar"}
],
label:{
show:true,//1.显示文字
formatter:function (args) {//格式化文字 与show一起使用
return args.name+args.value
}
},
roseType: 'radius',//2.南丁格尔图
selectedMode: 'multiple', //3.选中效果 single和multiple
selectedOffset: 30,//选中扇区的偏移距离
radius: ['50%', '70%'],//4.圆环 数组的第一项是内半径，第二项是外半径
//radius: 50, //直接指定外半径值,也可以是百分比'30%'
}
]
5.1.5 地图
百度地图API : 使用百度地图的 api , 它能够在线联网展示地图, 百度地图需要申请 ak
矢量地图 : 可以离线展示地图, 需要开发者准备矢量地图数据
//这里使用的是矢量地图
//第一步：在static/map文件夹下准备china.json文件
//第二步：通过JQuery获取json文件的数据
//第三步：调用registerMap方法 ,往echarts全局对象注册地图的 json 数据
//第四步：需要配置 geo 节点并使用
let _this=this //这里的this需要指定组件的实例对象，因为echarts在vue的原型上
$.get('static/map/china.json', function (chinaJson) {
_this.$echarts.registerMap('chinaMap', chinaJson)
})
let option = {
geo: {
type: 'map',// map是一个固定的值
map: 'chinaMap',//chinaMap需要和registerMap中的第一个参数保持一致
}
}
基本配置：
let option = {
geo: {
type: 'map',
map: 'chinaMap',
roam: true, // 1.鼠标进行拖动和缩放
label:{
show:true//2.显示名称
},
zoom:3,//3.缩放比例，默认是1
center: [87.617733, 43.792818] // 4.当前视角的中心点，用经纬度表示
}
}
常见效果：
//显示某个区域
$.get('static/map/anhui.json', function (anhuiJson) { //在static/map文件夹下准备anhui.json文件
})
//不同城市显示不同颜色
//1.配置series下的data ,其中name必须和static/map/anhui.json的name对应
//2.配置geoIndex和type
//3.结合 visualMap 配合使用
let airData = [
{ name: '北京', value: 39.92 },{ name: '天津', value: 39.13 },
{ name: '上海', value: 31.22 },{ name: '重庆', value: 66 },
{ name: '河北', value: 147 },{ name: '河南', value: 113 },
{ name: '云南',value: 25.04 },{ name: '辽宁', value: 50 },
{ name: '黑龙江', value: 114 },{ name: '湖南', value: 175 },
{ name: '安徽', value: 117 },{ name: '山东', value: 92 },
{ name: '新疆', value: 84 },{ name: '江苏', value: 67 },
{ name: '浙江', value: 84 },{ name: '江西', value: 96 },
{ name: '湖北',value: 273 },{ name: '广西', value: 59 },
{ name: '甘肃', value: 99 },{ name: '山西', value: 39 },
{ name: '内蒙古', value: 58 },{ name: '陕西',value: 61 },
{ name: '吉林', value: 51 },{ name: '福建', value: 29 },
{ name: '贵州', value: 71 },{ name: '广东', value: 38 },
{ name: '青海',value: 57 },{ name: '西藏', value: 24 },
{ name: '四川', value: 58 },{ name: '宁夏', value: 52 },
{ name: '海南', value: 54 },{ name: '台湾', value: 88 },
{ name: '香港', value: 66 },{ name: '澳门', value: 77 },
{ name: '南海诸岛', value: 55 }
]
let option = {
geo: {
type: 'map',
map: 'chinaMap',
label:{
show:true
},
},
series: [
{
data: airData,
geoIndex: 0, //和geo关联起来，他的索引值代表第几个geo
type: 'map', //设置地图形式
},
],
visualMap: {
min: 0, // 最小值
max: 300, // 最大值
inRange: {
color: ['white', 'red'] // 颜色的范围
},
calculable: true // 是否显示拖拽用的手柄（手柄能拖拽调整选中范围）
}
}
//地图和散点图结合
//1.配置data
//2.配置type: 'effectScatter',
//3.让散点图使用地图坐标系统 coordinateSystem: 'geo',
//4.让涟漪的效果更加明显 rippleEffect
var option = {
series: [
{
data: [
{
value: [117.283042, 31.86119] // 散点的坐标, 使用的是经纬度
}
],
type: 'effectScatter',
coordinateSystem: 'geo',
rippleEffect: {
scale: 10
}
}
]
}
5.1.6 雷达图
let dataMax = [
{
name: '易用性', max: 100
},
{
name: '功能', max: 100
},
{
name: '拍照', max: 100
},
{
name: '跑分', max: 100
},
{
name: '续航', max: 100
}
]
let option = {
radar: {
indicator: dataMax //1.设置最大值和名称
},
series: [
{
type: 'radar', //2.设置type类型
data: [ //3. 设置比较的数据
{
name: '华为',
value: [80, 90, 80, 82, 90]
},
{
name: '苹果',
value: [70, 82, 75, 70, 78]
}
]
}
]
}
常见效果：
let option = {
radar: {
indicator: dataMax,
shape: 'circle' //3.最外层形状 'polygon' ==> 多边形 'circle'==>圆形
},
series: [
{
type: 'radar',
label:{
show:true //1.显示数值
},
areaStyle: {}, //2.区域面积
data: []
}
]
}
5.1.7 仪表盘
let option = {
series: [
{
type: 'gauge', //设置类型为gauge
data: [
{
value: 97, //代表指针的数值
}
]
}
]
}
常见效果：
series: [
{
type: 'gauge',
data: [
{
value: 97,
itemStyle:{
color:'red' //2.配置指针的颜色
}
},
{ //3.配置多个对象，每个对象代表一个指针
value: 77,
}
],
min:50, //1.配置最大值和最小值
max:120
}
]
6.1 高级配置
6.1.1 显示相关
6.1.1.1 主题
内置主题
//第二个参数控制主题颜色 可选值：'light'、'dark'
let myChart = this.$echarts.init(this.$refs.main,'dark')
自定义主题
//网址：https://echarts.apache.org/zh/theme-builder.html
1.配置好想要的主题 purple：主题名
2.下载js文件到项目中 purple.js
3.引入js文件 import '../../static/theme/purple'
4.注册使用 let myChart = this.$echarts.init(this.$refs.main,'purple')
6.1.1.2 调色盘
主题调色盘
//在下载的js文件中配置
echarts.registerTheme('itcast', {
"color": [
"#893448",
"#d95850",
"#eb8146",
"#ffb248",
"#f2d643",
"#ebdba4"
],
})
全局调色盘
//在option中配置
var option = {
color: ["#893448", "#d95850", "#eb8146", "#ffb248","#f2d643","#ebdba4"]
}
局部调色盘
//在 series配置
series: [
{
color: ["#893448", "#d95850", "#eb8146", "#ffb248","#f2d643","#ebdba4"]
}
]
6.1.1.3 渐变颜色的实现
线性渐变
//x, y, x2, y2 范围从 0 - 1 以(x,x2),(y,y2)为原点，在那个轴就代表是那个方向
itemStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 0, color: 'red'}, // 0% 处的颜色
{ offset: 1, color: 'blue'} // 100% 处的颜色
],
globalCoord: false // 缺省为 false
}
}
径向渐变
//x , y , r分别是圆心 x , y 和半径，取值0-1
series: [
{
itemStyle: {
color: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [
{offset: 0, color: 'red' }, // 0% 处的颜色
{ offset: 1, color: 'blue'}// 100% 处的颜色
],
global: false // 缺省为 false
}
}
}
]
6.1.1.4 样式
直接样式
//itemStyle,textStyle,lineStyle,lineStyle,label
data: [
{
value: 11231,
name: "淘宝",
itemStyle: { //直接样式
color: 'black'
}
}
]
高亮样式
data: [
{
value: 11231,
name: "淘宝",
itemStyle: { //直接样式
color: 'black'
},
emphasis: { //高亮样式,就是包裹一层emphasis
itemStyle: {
color: 'blue'
},
}
}
]
6.1.1.5 响应式
//通过监听浏览器窗口的onresize方法，调用echarts的resize来实现响应式
let myChart = this.$echarts.init(this.$refs.main,'purple')
//方式一
window.onresize=()=>{
myChart.resize()
}
//方式二：
window.onresize = myChart.resize
6.1.2 动画相关
6.1.2.1 加载动画
//mCharts.showLoading() 显示加载动画
//mCharts.hideLoading() 隐藏加载动画
使用场景：
发送请求前：mCharts.showLoading()
发送请求成功的回调：mCharts.hideLoading()
6.1.2.2 增量动画
//所有数据的更新都通过 setOption 实现
需要重新设置option和配置mCharts.setOption(option)，但是原来option有的不需要重写，会自动整合，而不是覆盖。
6.1.2.3 动画的配置
animation: true //开启动画,默认开启
animationDuration: 5000 //动画时长
animationEasing : 'bounceOut'//缓动动画 可选值：linear bounceOut
animationThreshold: 8//动画阈值 单种形式的元素数量大于这个阈值时会关闭动画
let option = {
animation: true,
animationDuration: 5000,
animationEasing : 'bounceOut',
animationThreshold: 7,
}
6.1.3 常用API
全局echartsAPI
1.echarts.init //创建实例对象，第一个参数是dom对象，第二个参数是主题
2.echarts.registerTheme //注册自定义主题，在下载的js中注册，只有注册后才能使用
3.echarts.registerMap //echarts.connect
4.echarts.connect //实现多图关联，传入联动目标为 EChart 实例，支持数组
以实现多图关联，传入联动目标为 EChart 实例，支持数组
let mCharts1 = echarts.init(document.querySelector("div1"))
let mCharts2 = echarts.init(document.querySelector("div2"))
echarts.connect([mCharts1, mCharts2])
实例对象API
1.myEcharts.setOption() //设置或修改图表实例的配置项以及数据
2.myEcharts.resize() //重新计算和绘制图表，搭配window.onresize使用，做响应式
3.myEcharts.on() 'click'、'dblclick'、'mousedown'、'mousemove'、'mouseup' //绑定事件
myEcharts.on('click', function (arg) {
console.log(arg)
})
4.myEcharts.off() 'click'、'dblclick'、'mousedown'、'mousemove'、'mouseup' //解绑事件
5.myEcharts.dispatchAction() //主动触发某些行为, 使用代码模拟用户的行为
mCharts.dispatchAction({
type: "highlight",// 触发高亮的行为
seriesIndex: 0,//触发的图表
dataIndex: 1 //图表上的具体某个数据
})
6.myEcharts.clear() //清除所有的实例图表，但是通过myEcharts.setOption()还可以显示
7.myEcharts.dispose()//销毁所有的实例图表，不可以还原了
如果觉得有帮助欢迎点赞、评论。 上述内容仅仅代表个人观点，如有错误，请指正。如果你也对前端感兴趣，欢迎访问我的个人博客sundestiny.github.io/myblog/
