echarts与vue

林安

2022 年 06 月 25 日

414 次浏览

1 条评论

3274字数

VUE Charts

1. 安装

npm install echarts --save

2. 引入

`// 引入echarts
import echarts from 'echarts
Vue.prototype.$echarts = echarts`

3. 使用

需要用到echarts的地方先设置一个div，具有id、宽高

要在mounted生命周期函数中实例化echarts对象。确保dom元素已经挂载到页面中
`mounted(){
```
this.getEchartData()  
```
},`

在methods里获取dom节点和存放图表数据代码

getEchartData() {
        const chart = this.$refs.chart 
        let option = {...}
        myChart.setOption(option)

}

4. 常用配置

title：标题组件，包含主标题和副标题。
grid：直角坐标系内绘图网格
1. grid:{
  left:"10%", // grid 组件离容器左侧的距离。可以是具体的数值(px)，也可以是相对于容器的百分比
  right:10, // grid 组件离容器右侧的距离。
  top:10, // grid 组件离容器上侧的距离。
  bottom:10, // grid 组件离容器下侧的距离。
  }
legend：图例组件
1. legend:{
  show: true // 显示图例
  type: plain / scroll // plain：普通图例 scroll：可滚动翻页的图例
  left: 'auto' // 图例组件离容器左侧的距离
  ...
  width: 'auto' // 图例宽度，默认自适应
  }
xAxis x轴，yAxis y轴
1. show: true // 布尔值，是否展示轴线
2. alignTicks: true // 布尔值，展示刻度
3. type: category | value | time | log // 坐标轴类型
4. name: "平均值" // 坐标轴名称
5. min: 0 // 最小值(坐标起始值)
6. max: 10 // 最大值(坐标结束值)
7. axisLine:{ // 轴线配置
  show: true // 是否展示坐标轴线
  onZero: true // X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上，只有在另一个轴为数值轴且包含 0 刻度时有效
  symbol: none // 默认不显示箭头，两端都显示箭头可以设置为 'arrow'，只在末端显示箭头可以设置为 ['none', 'arrow']
  lineStyle:{
  type: "solid" // 线的类型
  color: "#333" // 线的颜色
  width: 1 // 线的宽度
  }
  }
8. axisTick:{ // 轴刻度相关配置
  show: true // 是否显示坐标轴刻度
  alignWithLabel: true // 刻度线和标签对齐
  interval: 'auto' // 坐标轴刻度的显示间隔，设置成 0 强制显示所有标签
  inside: true // 坐标轴刻度是否朝内，默认朝外
  length: 5 // 坐标轴刻度的长度
  }
dataZoom：用于区域缩放
dataZoom-inside: 'inside'
1. 内置型数据区域缩放组件(dataZoomInside):内置于坐标系中，可以在坐标系上通过鼠标拖拽、鼠标滚轮、手指滑动(触屏上）来缩放或漫游坐标系。
2. 滑动条型数据区域缩放组件(dataZoomslider)︰有单独的滑动条，用户在滑动条上进行缩放或漫游。
3. 框选型数据区域缩放组件(dataZoomselect):提供—个选框进行数据区域缩放。即toolbox. feature.dataZoom，配置项在‘toolbox 中,
tooltip：提示框组件
1. tooltip：{
  show: true // 是否显示提示框组件
  trigger: item // 触发类型，可选：'item'数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。'axis'坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。'none'什么都不触发
  }
toolbox：工具栏组件
1. toolbox:{
  show: true // 是否显示工具栏组件
  orient: 'horizontal' // 工具栏 icon 的布局朝向，可选：'horizontal'，'vertical'
  itemSize: 15 // 工具栏 icon 的大小
  }

5.部分通用配置

left：组件离容器左侧的距离
right：组件离容器右侧的距离
top：组件离容器上侧的距离
bottom：组件离容器下侧的距离
width：宽度
height：高度
length：长度
show：是否显示
type：类型
textStyle：文本设置
1. textStyle:{
  color: 颜色
  fontStyle: 风格
  fontWeight: 粗细
  fontFamily: 系列
  fontSize: 大小
  lineHeight: 行高
  }