echarts常用配置以及在vue中使用介绍

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/m0_37805167/article/details/80825881

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等设置标注