echarts在vue中使用:
- 安装echarts: npm install echarts –save-dev
- echarts 在某个vue组件中的局部使用:
import echarts from 'echarts'
// 使用
echarts.init(document.getElementById('id名'))
- echarts在多个组件中使用,便可配置到全局, main.js中:
import echarts from 'echarts'
Vue.prototype.$echarts = echarts;
// 组件中使用:
this.$echarts.init(document.getElementById('id名'));
echarts常用图表以及常用配置:
tooltip(即鼠标滑过弹出层) 的相关配置:
show: true/false // 是否显示
// 触发形式, item 图形触发,主要是饼状图等无坐标轴的, axis 坐标轴触发 , none 不触发
trigger : item / axis / none
// {a} – 图标名称 {b} – 数据项名称 {c} – 数据项值 {d} – 占比
formatter: “{b} : {c} ({d}%)”axisPointer : { // 坐标轴指示器,坐标轴触发有效
type : ‘shadow’ // 默认为直线,可选为:’line’ | ‘shadow’
}
triggerOn: mouseover / click / none // 触发条件//样式 主要是驼峰命名形式设置
borderWidth , backgroundColor ,borderColor , padding 等等
// 文字样式
textStyle:{
color:‘’, fontSize:‘’ ,fontFamily :‘’ // 等等
}
提示框的位置也可通过position来设置series的相关配置:
series是数组形式,多图形混合即配置多个数组项即可
单个数组项的配置
name – 名称
type – 用于确定显示的图表类型 eg. bar/map/line/pie 等等
label:{
show – 是否显示对应数据项的数值
position – 显示的位置 top/left/inside 等等,根据不同图表或相同图表的方向有区分
formatter – 设置显示文字, 与tooltip同
也可通过color等配置显示样式
}
data –显示数据
itemStyle:{ //配置样式,可分为normal(正常情况下) emphasis(选中情况下)进行配置 }
areaStyle:{ // 配置图形区域样式 , 可分为normal(正常情况下) emphasis(选中情况下)进行配置}
raduis – 饼状图可通过这个属性配置是是否为实心圆,也可以以此来设置图形的大小 ,eg [70%,80%] 从图形70%的位置渲染到80%的位置
center: 显示的位置 [50%,50%] 中间
markLine : { // 设置折线图某条对应曲线
data : [
{type : ‘average’, name : ‘平均值’}
]
}
也可通过markPoint等设置标注