基于VUE的echarts用法及各配置项详细说明总结-20210512

1、安装echarts

npm install echarts --s

2、在main.js中配置echars

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

3、echart的常规用法，demo如下：

<template>
    <div id="app" >
    <div class="echarts-bar" ref="echarts-bar"></div>
    </div>
</template>
<script>
export default {
  name: 'echartsDemo',
  data () {
    return {
      echartsObj: {},
      echartsOption: {
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎', '百度', '谷歌', '必应', '其他']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '直接访问',
            type: 'bar',
            data: [320, 332, 301, 334, 390, 330, 320]
          },
          {
            name: '邮件营销',
            type: 'bar',
            stack: '广告',
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '联盟广告',
            type: 'bar',
            stack: '广告',
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: '视频广告',
            type: 'bar',
            stack: '广告',
            ddata: [150, 230, 224, 218, 135, 147, 260],
          },
          {
            name: '搜索引擎',
            type: 'bar',
            data: [862, 1018, 964, 1026, 1679, 1600, 1570],
            markLine: {
              lineStyle: {
                normal: {
                  type: 'dashed'
                }
              },
              data: [
                [{type: 'min'}, {type: 'max'}]
              ]
            }
          },
          {
            name: '百度',
            type: 'bar',
            barWidth: 5,
            stack: '搜索引擎',
            data: [620, 732, 701, 734, 1090, 1130, 1120]
          },
          {
            name: '谷歌',
            type: 'bar',
            stack: '搜索引擎',
            data: [120, 132, 101, 134, 290, 230, 220]
          },
          {
            name: '必应',
            type: 'bar',
            stack: '搜索引擎',
            data: [60, 72, 71, 74, 190, 130, 110]
          },
          {
            name: '其他',
            type: 'bar',
            stack: '搜索引擎',
            data: [62, 82, 91, 84, 109, 110, 120]
          }
        ]
      }
    }
  },
  methods: {
    _initEcharts () {
      this.echartsObj = this.$echarts.init(this.$refs['echarts-bar'])
      this.echartsObj.setOption(this.echartsOption)
    }
  },
  mounted () {
    this._initEcharts()
  }
}
</script>
<style scoped>
#app{
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    position: relative;
}
.echarts-bar {
  position: absolute;
  left: 20px;
  top: 20px;
  width: 600px;
  height:400px;
  background: #fff
}
</style>
<style lang="less">
.hello .el-col-12 {
  width: 15%;
}
</style>

复制该demo后，配置路由即可正常运行。
更多Echarts工具demo及用法见ECharts官网

每个系列通过 type 决定自己的图表类型：

 - type: 'bar'：柱状/条形图
 - type: 'line'：折线/面积图
 - type: 'pie'：饼图
 - type: 'scatter'：散点（气泡）图
 - type: 'effectScatter'：带有涟漪特效动画的散点（气泡）
 - type: 'radar'：雷达图
 - type: 'tree'：树型图
 - type: 'treemap'：树型图
 - type: 'sunburst'：旭日图
 - type: 'boxplot'：箱形图
 - type: 'candlestick'：K线图
 - type: 'heatmap'：热力图
 - type: 'map'：地图
 - type: 'parallel'：平行坐标系的系列
 - type: 'lines'：线图
 - type: 'graph'：关系图
 - type: 'sankey'：桑基图
 - type: 'funnel'：漏斗图
 - type: 'gauge'：仪表盘
 - type: 'pictorialBar'：象形柱图
 - type: 'themeRiver'：主题河流
 - type: 'custom'：自定义系列

echarts 各个配置项详细说明总结如下：

theme = {
    // 全图默认背景
    // backgroundColor: 'rgba(0,0,0,0)',

    // 默认色板
    color: ['#ff7f50','#87cefa','#da70d6','#32cd32','#6495ed',
            '#ff69b4','#ba55d3','#cd5c5c','#ffa500','#40e0d0',
            '#1e90ff','#ff6347','#7b68ee','#00fa9a','#ffd700',
            '#6699FF','#ff6666','#3cb371','#b8860b','#30e0e0'],

    // 图表标题
    title: {
        x: 'left',                 // 水平安放位置，默认为左对齐，可选为：
                                   // 'center' ¦ 'left' ¦ 'right'
                                   // ¦ {number}（x坐标，单位px）
        y: 'top',                  // 垂直安放位置，默认为全图顶端，可选为：
                                   // 'top' ¦ 'bottom' ¦ 'center'
                                   // ¦ {number}（y坐标，单位px）
        //textAlign: null          // 水平对齐方式，默认根据x设置自动调整
        backgroundColor: 'rgba(0,0,0,0)',
        borderColor: '#ccc',       // 标题边框颜色
        borderWidth: 0,            // 标题边框线宽，单位px，默认为0（无边框）
        padding: 5,                // 标题内边距，单位px，默认各方向内边距为5，
                                   // 接受数组分别设定上右下左边距，同css
        itemGap: 10,               // 主副标题纵向间隔，单位px，默认为10，
        textStyle: {
            fontSize: 18,
            fontWeight: 'bolder',
            color: '#333'          // 主标题文字颜色
        },
        subtextStyle: {
            color: '#aaa'          // 副标题文字颜色
        }
    },

    // 图例
    legend: {