本文详细介绍了如何在Vue项目中使用ECharts，包括基本配置、饼图、柱状图的实现，以及异步加载数据的方法。同时，讨论了ECharts的事件处理机制，如用户交互事件和组件行为事件，并提到了响应式设计和视觉映射的应用教程，为ECharts的深入使用提供参考。
cnpm install echarts --save
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
// 基于准备好的dom(宽高已设定)，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById('main'));
- 基本配置
// 配置图表
myChart.setOption({
//图表标题
title: {
text: '第一个 ECharts 实例',
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, // 主副标题纵向间隔，单位px，默认为10，
textStyle: {
fontSize: 18,
fontWeight: 'bolder',
color: '#333' // 主标题文字颜色
},
subtextStyle: {
color: '#aaa' // 副标题文字颜色
}
},
color:['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'purple' ],//全局调色盘
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'
}
},
//x轴
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
position:"bottom", //x 轴的位置。"top"，"bottom"，
type:"category", //坐标轴类型。
/*type:'value' 数值轴，适用于连续数据。
type:'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。
type:'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
type:'log' 对数轴。适用于对数数据*/
name:'时间', //坐标轴名称
nameLocation:"end", //坐标轴名称显示位置 。'start','middle','end'
nameTextStyle:{ //坐标轴名称的文字样式
color:"#333",
fontStyle:"normal",
fontWeight:"normal",
fontFamily:"sans-serif",
fontSize:18,
}
nameGap:15, //坐标轴名称与轴线之间的距离
nameRotate:0, //坐标轴名字旋转，角度值
inverse:false, //是否是反向坐标轴
boundaryGap:true, //类目轴中 boundaryGap 可以配置为 true 和 false。非类目轴，包括时间，数值，对数轴，boundaryGap是一个两个值的数组，分别表示数据最小值和最大值的延伸范围，可以直接设置数值或者相对的百分比，在设置 min 和 max 后无效['20%', '20%']
min:null, //坐标轴刻度最小值。可以设置成特殊值 'dataMin'，此时取数据在该轴上的最小值作为最小刻度。不设置时会自动计算最小值保证坐标轴刻度的均匀分布。在类目轴中，也可以设置为类目的序数
max:null, //坐标轴刻度最大值。可以设置成特殊值 'dataMax'，此时取数据在该轴上的最大值作为最大刻度。不设置时会自动计算最大值保证坐标轴刻度的均匀分布。在类目轴中，也可以设置为类目的序数
scale:false, //只在数值轴中（type: 'value'）有效。是否是脱离 0 值比例。设置成 true 后坐标刻度不会强制包含零刻度。在双数值轴的散点图中比较有用。在设置 min 和 max 之后该配置项无效。
splitNumber:5, //坐标轴的分割段数，需要注意的是这个分割段数只是个预估值，最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整
minInterval:0, //自动计算的坐标轴最小间隔大小,例如可以设置成1保证坐标轴分割刻度显示成整数。只在数值轴中（type: 'value'）有效。
logBase:10, //对数轴的底数，只在对数轴中（type: 'log'）有效
silent:false, //坐标轴是否是静态无法交互
triggerEvent:false, //坐标轴的标签是否响应和触发鼠标事件
axisLine:{ //坐标 轴线
show:true, //是否显示坐标轴轴线
onZero:true, //X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上，只有在另一个轴为数值轴且包含 0 刻度时有效
lineStyle:{
color:"#333", //颜色，支持线性渐变，径向渐变，纹理填充
shadowColor:"red", //阴影颜色
shadowOffsetX:0, //阴影水平方向上的偏移距离。
shadowOffsetY:0, //阴影垂直方向上的偏移距离
shadowBlur:10, //图形阴影的模糊大小。
type:"solid", //坐标轴线线的类型，'solid'，'dashed'，'dotted'
width:1, //坐标轴线线宽
opacity:1, //图形透明度
}
},
axisTick :{ //坐标轴刻度相关设置
show:true, //是否显示坐标轴刻度。
alignWithLabel:false, //类目轴中在 boundaryGap 为 true 的时候有效，可以保证刻度线和标签对齐
interval:auto, //坐标轴刻度的显示间隔，在类目轴中有效。默认会采用标签不重叠的策略间隔显示标签。可以设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推
inside:false, //坐标轴刻度是否朝内，默认朝外。
length:5, //坐标轴刻度的长度。
},
axisLabel:{ //坐标轴刻度标签的相关设置
show:true, //是否显示
interval:"auto", //坐标轴刻度标签的显示间隔，在类目轴中有效。默认会采用标签不重叠的策略间隔显示标签。可以设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推
inside:false, //刻度标签是否朝内，默认朝外
rotate:0, //刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠。旋转的角度从 -90 度到 90 度
margin:8, //刻度标签与轴线之间的距离
formatter: function (value, index) { //使用函数模板，函数参数分别为刻度数值（类目），刻度的索引
return value+"kg";
},
showMinLabel:null, //是否显示最小 tick 的 label。可取值 true, false, null。默认自动判定（即如果标签重叠，不会显示最小 tick 的 label）
showMaxLabel:null, //是否显示最大 tick 的 label。可取值 true, false, null。默认自动判定（即如果标签重叠，不会显示最大 tick 的 label）
textStyle:{
color:"#333",
fontStyle:"normal",
fontWeight:"normal",
fontFamily:"sans-serif",
fontSize:18
}
},
splitLine:{ //坐标轴在 grid 区域中的分隔线。
show:true, //是否显示分隔线。默认数值轴显示，类目轴不显示。
interval:"auto", //坐标轴分隔线的显示间隔，在类目轴中有效。默认会采用标签不重叠的策略间隔显示标签。可以设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，可以用数值表示间隔的数据，也可以通过回调函数控制。回调函数格式如下：
lineStyle:{
color:"#333", //颜色，支持线性渐变，径向渐变，纹理填充
shadowColor:"red",
shadowOffsetX:0,
shadowOffsetY:0,
shadowBlur:10,
type:"solid", //坐标轴线线的类型，solid，dashed，dotted
width:1,
opacity:1,
}
},
splitArea:{ //坐标轴在 grid 区域中的分隔区域，默认不显示。
interval:"auto",
show:false, //是否显示分隔区域
areaStyle:{
color:['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)'],//分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
shadowColor:"red",
shadowOffsetX:0,
shadowOffsetY:0,
shadowBlur:10
}
},
},
//y轴
yAxis: {
//大部分同xAxis
},
// 图例
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' // 图例文字颜色
}
},
//每个系列通过 type 决定自己的图表类型:
series: [{
name: '销量', // 系列名称
type: 'bar', // 系列图表类型
/*type: 'bar'：柱状/条形图
type: 'line'：折线/面积图
type: 'pie'：饼图
type: 'scatter'：散点（气泡）图*/
data: // 系列中的数据内容
}]
});
- 饼图
series : [
{
name: '访问来源',
type: 'pie', //饼图
data:[ //数据数组，name 为数据项名称，value 为数据项值
{value:235, name:'视频广告'},
{value:274, name:'联盟广告'},
{value:310, name:'邮件营销'},
{value:335, name:'直接访问'},
{value:400, name:'搜索引擎'}
],
color:['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'purple' ], //饼图的调色盘
itemStyle: {
normal: {
shadowBlur: 200,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
radius: '55%', //饼图的外半径为可视区尺寸（容器高宽中较小一项）的 55%
roseType: 'angle' //变成南丁格尔图
}
],
textStyle:{
}
- 柱状图
series: [{
name: '直方图',
type: 'bar',
color: [] //柱状图的调色盘
data: data, //数据存在data变量里，数据格式同饼图，或者数组中只写value
itemStyle : {
normal : {
color ://柱状图颜色
},
emphasis: { //鼠标悬浮时的高亮样式
}
},
barWidth : 10,
label:{
normal:{
show:true,
position:"top",
textStyle:{
color:"#9EA7C4"
}
}
},
}
]
- 异步加载数据
- ECharts是数据驱动图表表示的
//loading动效
myChart.showLoading()
myChart.hideLoading()
-
ECharts事件处理
-
ECharts 中事件分为两种类型:
-
用户鼠标操作 ‘click’、‘dblclick’、‘mousedown’、‘mouseup’、‘mouseover’、‘mouseout’、‘mousemove’、‘globalout’、‘contextmenu’
-
用户在使用可以交互的组件后触发的行为事件，
（例如在切换图例开关时触发的 ‘legendselectchanged’ 事件），（数据区域缩放时触发的 ‘datazoom’ 事件）等等。
myChart.on('click', 指定的组件, function (params) {
//所有的鼠标事件包含参数 params，这是一个包含点击图形的数据信息的对象
});
指定的组件可以是string或Object
1.string 表示组件类型。格式可以是 'mainType' 或者 'mainType.subType'
如series，series.line
2.如果为 Object，可以包含以下一个或多个属性，每个属性都是可选的：
{
<mainType>Index: number // 组件 index
<mainType>Name: string // 组件 name 如seriesName
<mainType>Id: string // 组件 id
dataIndex: number // 数据项 index
name: string // 数据项 name
dataType: string // 数据项 type，如关系图中的 'node', 'edge'
element: string // 自定义系列中的 el 的 name
}
/*params对象属性
{
componentType: string, // 当前点击的图形元素所属的组件名称，其值如 'series'、'markLine'、'markPoint'、'timeLine' 等。
seriesType: string, //系列类型。值可能为：'line'、'bar'、'pie' 等。当 componentType 为 'series' 时有意义。
seriesIndex: number, // 系列在传入的 option.series 中的 index。当 componentType 为 'series' 时有意义。
seriesName: string, // 系列名称。当 componentType 为 'series' 时有意义。
name: string, // 数据名，类目名
dataIndex: number, // 数据在传入的 data 数组中的 index
data: Object, // 传入的原始数据项
dataType: string, //'node' 或者 'edge'
value: number|Array // 传入的数据值
color: string // 数据图形的颜色。当 componentType 为 'series' 时有意义。
}
*/
扫一扫
2295
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
