安装和配置

在Vue项目中使用ECharts，需要先安装ECharts：

npm install echarts --save

在项目中使用的版本是"echarts": "^5.4.1"

安装完成后，需要在项目中引入ECharts：

import * as echarts from 'echarts'

页面结构

在组件中，需要在<template>中添加一个<div>标签，用于渲染图表：

<template>
  <div ref="charts" class="charts"/>
</template>

为了使图表能够显示,需要先设置其宽高：(高度可根据实际情况设置)

.charts {
  width: 100%;
  height: 100%;
}

为了在后续方便获取到这个图表实例,在data中添加一个变量：

data() {
  return {
    mycharts: null
  }
}

初始化图表

在mounted钩子函数中，初始化图表：

mounted() {
  this.mycharts = echarts.init(this.$refs.charts)
}

配置图表

为了重复使用配置项,在methods中添加一个函数：

initEcharts() {
  // 初始化charts实例
  this.mycharts.setOption({
    // x轴
    xAxis: {
      show: false, // 隐藏x轴
      type: 'category',
      data: this.classNameList
    },
    // y轴
    yAxis: {
      show: false
    },
    // 系列
    series: [
      {
        type: 'bar', // 柱状图
        data: this.classCount,
        label: {
          show: true, // 显示柱状图的文字
          position: 'inside' // 文字显示在柱状图的里面
        },
        // 随机颜色
        itemStyle: {
          normal: {
            color: function(params) {
              return '#' + ('00000' + (Math.random() * 0x1000000 << 0).toString(16)).substr(-6)
            }
          }
        }
      }
    ],
    // 布局调试
    grid: {
      left: 0,
      top: 0,
      right: 0,
      bottom: 0
    },
    // 鼠标悬浮提示
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c}'
    }
  })
}

调用函数

在mounted钩子函数中，调用函数：

mounted() {
  this.mycharts = echarts.init(this.$refs.charts)
  this.initEcharts()
}

图表自适应

在mounted钩子函数中，添加一个监听事件：

mounted() {
  this.mycharts = echarts.init(this.$refs.charts)
  this.initEcharts()
  window.addEventListener('resize', () => {
    this.mycharts.resize()
  })
}

图表数据更新

在watch中，监听数据变化：

watch: {
  classCount: {
    handler() {
      this.initEcharts()
    },
    deep: true
  }
}

基本配置参数

在Echarts中,可以通过setOption方法,配置图表的参数,很多图表的配置参数都是通用的

title--标题

在Echarts中,可以通过title配置图表的标题：

this.mycharts.setOption({
  title: {
    text: '标题', // 标题内容
    left: 'center', // 标题水平居中
    top: 'top', // 标题距离顶部的距离
    testStyle: {
      color: '#000', // 标题颜色
      fontSize: 16 // 标题字体大小
    }
  }
})

效果如图(该效果不包含标题的文字样式[testStyle],当时忘记设置这个了):

legend--图例

在Echarts中,可以通过legend配置图表的图例：

this.mycharts.setOption({
  legend: {
    data: ['图例1', '图例2', '图例3'], // 图例的数据
    left: 'center', // 图例水平居中
    bottom: 'bottom' // 图例距离底部的距离
  }
})

效果如图(左上角即为图例):

tooltip--鼠标悬浮提示

在Echarts中,可以通过tooltip配置图表的鼠标悬浮提示：

this.mycharts.setOption({
  tooltip: {
    trigger: 'item', // 触发类型
    formatter: '{b}: {c}' // 提示内容
  }
})

其中,{b}表示当前数据的名称,{c}表示图表的数据

效果如图:

toolbox--工具栏

在Echarts中,可以通过toolbox配置图表的工具栏：

this.mycharts.setOption({
  toolbox: {
    feature: {
      saveAsImage: {}, // 保存为图片
      restore: {}, // 还原
      dataView: {}, // 数据视图
      dataZoom: {}, // 数据缩放
      magicType: {}, // 动态类型切换
      brush: {} // 选框组件
    },
    // 纵向排列
    orient: 'vertical'
  }
})

常用的有saveAsImage和dataView

效果如图:

grid--布局调试

在Echarts中,可以通过grid配置图表的布局：

this.mycharts.setOption({
  grid: {
    left: 0,
    top: 0,
    right: 0,
    bottom: 0
  }
})

该配置项,可以设置图表的内边距,即图表距离容器的距离,常用于图表的自适应

其中,left表示图表距离容器左边的距离,top表示图表距离容器顶部的距离,right表示图表距离容器右边的距离,bottom表示图表距离容器底部的距离

都设置为0,即表示图表与容器的距离为0,x轴和y轴的文字会被遮挡

效果如图:

实际效果是隐藏了x轴和y轴的文字,但是图表的数据还是可以看到的

xAxis--x轴

在Echarts中,可以通过xAxis配置图表的x轴：

this.mycharts.setOption({
  xAxis: {
    show: true, // 显示x轴
    type: 'category', // 类型
    data: ['123', '456', '789'], // 数据
    axisLabel: {
      interval: 0, // 强制显示所有标签
      rotate: 45 // 旋转角度
    }
  }
})

type的类型有category和value,分别表示类目轴和数值轴,类目轴的话,其数据为字符串,数值轴的话,其数据为数值

此外还可以设置其最大值和最小值,属性为min和max,此处不作展示

在此只负责显示该部分(xAxis)的内容,其数据等设置不作展示.

由图可知,xAxis的数据被旋转了45度,并且强制显示了所有的标签:

yAxis--y轴

在Echarts中,可以通过yAxis配置图表的y轴：

this.mycharts.setOption({
  yAxis: {
    show: true, // 显示y轴
    type: 'value', // 类型
    axisLabel: {
      interval: 0, // 强制显示所有标签
      rotate: 45 // 旋转角度
    }
  }
})

设置和x轴类似, 其效果如图:

其type设置为category,y轴可横向显示(series设置暂时忽略),其效果如图:

series--数据

在Echarts中,可以通过series配置图表的数据：

this.mycharts.setOption({
  series: [
    {
      name: '图例1', // 图例名称
      type: 'bar', // 图表类型
      data: [1, 2, 3] // 图表数据
    },
    {
      name: '图例2', // 图例名称
      type: 'bar', // 图表类型
      data: [4, 5, 6] // 图表数据
    },
    {
      name: '图例3', // 图例名称
      type: 'bar', // 图表类型
      data: [7, 8, 9] // 图表数据
    }
  ]
  /*
  * 其type可设置成很多种,常用的有```bar```和```line```,分别表示柱状图和折线图
  * 所有可设置的type如下:
  * ```pie```,```bar```,```line```
  * ```scatter```,```effectScatter```
  * ```radar```,```tree```,```treemap```
  * ```sunburst```,```boxplot```,```candlestick```
  * ```heatmap```,```map```,```parallel```
  * ```lines```,```graph```,```sankey```
  * ```funnel```,```gauge```,```pictorialBar```
  * ```themeRiver```,```custom```
  * */
})

在配置了legend,tooltip,toolbox,xAxis,yAxis后,就可以配置series了,效果如图:

在此演示了三个图例,分别为图例1,图例2,图例3,其数据分别为1,2,3,4,5,6,7,8,9

series可配置的属性很多,此处只演示常用的属性,其余属性可参考官网

常用的属性有:

// 图例名称
name: '图例1',
// 图表类型
type: 'bar',
// 图表数据
data: [1, 2, 3],
// 图表颜色
color: '#f00',
// 图表数据项的样式
itemStyle: {
  // 图表数据项的颜色
  color: '#f00'
},
// 图表数据项的标签
label: {
  // 是否显示标签
  show: true,
  // 标签的位置
  position: 'top',
  // 标签的颜色
  color: '#f00',
  // 标签的字体大小
  fontSize: 12,
  // 标签的字体粗细
  fontWeight: 'bold'
}
// 图表数据项的标签
emphasis: {
  // 高亮的颜色
  color: '#f00'
}

series-itemStyle--图表数据项的样式

在series中,可以通过itemStyle配置图表数据项的样式,为了使图表看起来好看,可以为每个数据项配置不同的颜色:

itemStyle: {
  color: function (params) {
    return '#' + ('00000' + (Math.random() * 0x1000000 << 0).toString(16)).substr(-6)
  }
}

这个属性可以设置为一个颜色值,也可以设置为一个函数,函数的参数为当前数据项的参数,返回值为颜色值

其效果如下:

此后每个实例图都会使用该配置,不再单独说明

series-label--图表数据项的标签

在series中,可以通过label配置图表数据项的标签:

label: {
  show: true, // 显示标签
  position: 'inside' // 标签显示位置
}

这个属性可以设置为true或者false,表示是否显示标签,默认为false

position的值有top,bottom,left,right,inside等

设置后可以在图表上显示标签,其效果如图:

series-smooth--图表平滑度

在series中,可以通过smooth配置图表的平滑度:

smooth: true

这个属性可以设置为true或者false,表示是否显示平滑,默认为false

常用于折线图,其效果如图:

series-stack--图表堆叠

在series中,可以通过stack配置图表的堆叠:

stack: '堆叠'

这个属性可以设置为true或者false,表示是否显示堆叠,默认为false

常用于柱状图,通过配置多个series,可以实现柱状图的堆叠,其效果如图:

其series配置如下:

series: [
  {
    type: 'line', // 柱状图
    data: [5, 6, 8],
    label: {
      show: true, // 显示标签
      position: 'inside' // 标签显示位置
    },
    stack: '堆叠',
    // 随机颜色
    itemStyle: {
      normal: {
        color: function (params) {
          return '#' + ('00000' + (Math.random() * 0x1000000 << 0).toString(16)).substr(-6)
        }
      }
    }
  }
]

series-barWidth--图表柱状宽度

在series中,可以通过barWidth配置图表的柱状宽度:

barWidth: 20

series-barGap--图表柱状间距

在series中,可以通过barGap配置图表的柱状间距:

barGap: 20

series-barCategoryGap--图表柱状类目间距

在series中,可以通过barCategoryGap配置图表的柱状类目间距:

barCategoryGap: 20

series-radius--图表半径

在series中,可以通过radius配置图表的半径:

radius: 200

其作用于饼图,在此为了凸显效果,设置为200,可见饼图半径变得非常大,其效果如图:

series-center--图表中心

在series中,可以通过center配置图表的中心:

center: ['70%', '50%']

它的值为一个数组,第一个值为x轴的百分比,第二个值为y轴的百分比

作用是设置饼图的中心,此处设置x轴70%,y轴50%,可见饼图的中心偏右,其效果如图:

series-markLine--图表标线

在series中,可以通过markLine配置图表的标线,一般来说,标线是用来标记平均值的,其配置如下:

// 主要用于配置散点图的标线 该配置存放于series中
markLine: {
  {
    // 标线的名称
    tooltip: {
      formatter: '平均分：' + 40
    },
    lineStyle: {
      // 标线的样式 type可以是solid,dashed,dotted,分别是实线,虚线,点线
      type: 'solid', 
      // 颜色渐变
      color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
        offset: 0,
        color: '#f00'
      }, {
        offset: 1,
        color: '#00f'
      }])
    },
    data: [
      [
        // 通过coord指定标线起点的位置
        {
          coord: [0, 40],
          symbol: 'none'
        },
        // 通过coord指定标线终点的位置
        {
          coord: [6, 40],
          symbol: 'none'
        }
      ]
    ]
  }
}

上述代码中,通过coord指定标线的起点和终点,通过symbol指定标线的样式,通过tooltip指定标线的提示信息

symbol的值可以是none,circle,rect,roundRect,triangle,diamond,pin,arrow等

上述代码data中的数组中,第一个元素为标线的起点坐标,第二个元素为标线的终点坐标, 0,40 和 6,40 分别表示x轴的0和6,40表示y轴的40,即标线的起点为x轴的0,40,终点为x轴的6,40

当有多个标线时,可以通过配置多个data来实现

平均值的标线通过lineStyle的type属性指定为实线,color属性指定为颜色渐变,其效果如图:

为了配合散点图,x轴的最大值设置为6,y轴的最大值设置为100,其代码如下:

xAxis: [
  { gridIndex: 0, min: 0, max: 6 }
],
yAxis: [
  { gridIndex: 0, min: 0, max: 100 }
],

series中的设置如下:

series: [
  {
    name: '成绩',
    type: 'scatter',
    // 每个点的大小
    symbolSize: 10,
    // 每个点的数据 value的格式为 [x轴的值,y轴的值]
    data: [
      { name: '张三', value: [1, 23] },
      { name: '李四', value: [2, 78] },
      { name: '王五', value: [3, 13] },
      { name: '赵六', value: [4, 67] },
      { name: '田七', value: [5, 89] }
    ],
    // 每个点的随机颜色
    itemStyle: {
      normal: {
        color: function (params) {
          return '#' + ('00000' + (Math.random() * 0x1000000 << 0).toString(16)).substr(-6)
        }
      }
    },
    // 此处的markLine为标线配置 在上文中有详细介绍
    markLine: markLineOpt
  }
]

在配置好title,tooltip,xAxis,yAxis,series后,其效果如图:

完整代码请点击此处

图表点击事件

在mounted钩子函数中，添加一个监听事件：

this.myEcharts.on('click', params => {
  // params.dataIndex 获取点击的柱状图的索引
  // params.data 获取点击的柱状图的数据
  // params.name 获取点击的柱状图的名称
})

获取图表URL

在Echarts中，可以通过getDataURL方法，获取图表的URL：

this.myEcharts.getDataURL({
  pixelRatio: 2, // 像素比
  backgroundColor: '#fff' // 背景颜色
})

可以使用一个变量接收：

const url = this.myEcharts.getDataURL({
  pixelRatio: 2, // 像素比
  backgroundColor: '#fff' // 背景颜色
})

其中,url的值是一个base64编码的字符串,可以通过<img>标签显示：

<img :src="url" alt="">

图表导出

在Echarts中，可以通过export方法，导出图表：

this.myEcharts.export({
  pixelRatio: 2, // 像素比
  backgroundColor: '#fff', // 背景颜色
  name: '图表导出', // 导出的文件名
  type: 'png' // 导出的文件类型
})