1.echarts和图形大小自适应插件安装

通过资源管理器工具（yarn）输入命令

yarn add echarts

yarn add element-resize-detector

引入使用

import * as echarts from "echarts";
import ele from "element-resize-detector";

2.图形渲染

获取目标div的dom节点，设置参数进行渲染，渲染之前需要给定div的宽高

提示：当程序员需根据数据的数量设置宽或高时，调用 echarts.init 之前，如果DOM 容器没有设置宽高,图表显示可能就会有问题。

<template>
  <div class="ranking">
    <div ref="checkIn" id="checkIn"></div>
  </div>
</template>

<script>
import * as echarts from "echarts"
import ele from 'element-resize-detector'
export default {
  methods: {
    drawChart(){
        // let myChart = echarts.init(document.getElementById('checkIn'))
        let myChart = echarts.init(this.$refs.checkIn)
        // 获取dom节点时，不建议使用document.getElementById()来获取，因为当项目中有相同的id渲染不同图形时，会导致图形渲染不出来
        let options = {
            title: {
            
            },
            tooltip: {
                
            },
            grid: {
                
            },
            xAxis: {
                
            },
            yAxis: {
                
            },
            dataset: {
                
            },
            series: [
                
            ]
        }
        myChart.setOption(options)
        // 使用element-resize-detector插件自适应
        ele().listenTo(this.$refs.checkIn, function(e) {
            myChart.resize();
        })
    }
  }
}
</script>

<style lang='less' scoped>
.ranking {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  #checkIn {
    border-radius: 2%;
    width: 60%;
    height: 55%;
  }
}
</style>

3.options基本参数配置

title-标题

title: {
  show: true, // 是否显示
  text: '', // 图形标题信息
  top: '', // 通过top、bottom、left、right设置标题信息位置
  textStyle: { // 标题信息文字样式
    color: 'rgb()',
    fontSize: ''
  }
}

legend-图例

tooltip: {
  show: true, // 是否显示
  top: '', // 通过top、bottom、left、right设置图例位置
  width: '', // 设置图例宽
  height: '', // 设置图例高
  textStyle: { // 图例文字样式
    color: 'rgb()',
    fontSize: ''
  },
  icon: '' // 图例的icon图形：circle, rect, roundRect, triangle, diamond, pin, arrow, none
}

tooltip-提示框

tooltip: {
  show: true, // 是否显示
  trigger: 'axis', // 触发类型 饼图=>item 柱状图、折线图=>axis 不触发=>none
  axisPointer: {
    type: '' // 指示器类型 line：直线指示器 shadow：阴影指示器 none：无指示器 cross：十字准星指示器
  },
  formatter: params => { // 自定义提示，不设置该属性则按默认格式展示
    // console.log(params) // 当触发该提示框可打印输出查看
    return ''
  },
  textStyle: { // 提示框浮层的文本样式
    color: 'rgb()',
    fontSize: ''
  }
}

grid-直角坐标系

grid: {
  // 与绝对定位相似，top，left，right，bottom 设定是根据上级盒子宽高来计算
  // 如果图形为饼图，则无需配置该项
  top: '',
  bottom: '',
  left: '',
  right: '',
  containLabel: true // 防止标签溢出
}

xAxis-直角坐标系x轴

xAxis: {
  show: true, // 是否显示
  type: '', // 坐标轴类型 value：数值轴 category：类目轴
  name: '', // 坐标轴名称
  boundaryGap: true, // 坐标轴两边是否留白
  inverse: false, // 是否是反向坐标轴
  axisLine: { // 坐标轴轴线设置
    show: false,
    ...
  },
  axisTick: { // 坐标轴刻度设置
    show: false,
    ...
  },
  axisLabel: { // 坐标轴刻度标签设置
    show: false,
    ...
  },
  splitLine: { // 坐标轴在直角坐标系中的分割线设置
    show: false,
    ...
  },
  data: [] // 设置直角坐标系中x轴的数据
}

yAxis-直角坐标系y轴

yAxis: [ // 因为图形的y轴可能有两个，所以用数组包裹y轴的对象属性
{
  show: true, // 是否显示
  type: '', // 坐标轴类型 value：数值轴 category：类目轴
  boundaryGap: true, // 坐标轴两边是否留白
  inverse: false, // 是否是反向坐标轴
  axisLine: { // 坐标轴轴线设置
    show: false,
    ...
  },
  axisTick: { // 坐标轴刻度设置
    show: false,
    ...
  },
  axisLabel: { // 坐标轴刻度标签设置
    show: false,
    ...
  },
  splitLine: { // 坐标轴在直角坐标系中的分割线设置
    show: false,
    ...
  },
  data: [] // 设置直角坐标系中y轴的数据(基本不设置y轴数据)
}
]

dataset-数据集

dataset: { // 个人比较喜欢使用数据集，当然也可以在serise中对象的data属性进行数据设置
  source: [
    ['name', 'value1'],
    ['~', '~'],
    ['~', '~']
  ]
}

series

series: [
  {
    type: 'line', // 折线图
    yAxisIndex: 0, // 当存在多个y轴时，进行区别
    smooth: false, // 是否平滑曲线显示
    label: { // 图形上的文本标签设置
    }
  },
  {
    type: 'bar', // 柱状图
    barWidth: "4", // 设置柱状图图形宽度
    stack: '', // 图形堆叠，将参数相同的stack进行堆叠
    label: { // 图形上的文本标签设置
    }
  },
  {
    type: 'pie', // 饼图
    radius: ["~%", "~%"], // 饼图内圈与外圈大小设置，当内圈不为0且小于外圈可将饼图设置为环形图
    center: ["~%", "~%"], // 饼图中心点设置
    top: '', // 通过top、bottom、left、right设置饼图位置
    avoidLabelOverlap: false, // 是否启用防止标签重叠策略
    legendHoverLink: true, // 是否启用图例 hover 时的联动高亮
    label: { // 图形上的文本标签设置
      // 这里着重说明一下，在使用饼图的label时，如果数据项为零或空，此时对应的label文本找不到对应的图形，会出现在图形的左上角，所以不能确保数据可能为零或空时，不建议再使用该label属性！
    }
  }
]

最后附赠一个千分位函数，用于在echarts上显示数据大于千位时的展示

formatNum(value) {
  if (!value && value !== 0) return 0;
  let str = value.toString();
  let reg =
    str.indexOf(".") > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g;
  return str.replace(reg, "$1,");
}

Echarts基本使用

1.echarts和图形大小自适应插件安装

2.图形渲染

3.options基本参数配置