使用echarts与常用配置项等

## practice 

npm install echarts --save

<template>
  <div id="main"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  data() {
    return {
    }
  },
  watch: {
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(document.getElementById('main'));
      this.setOptions()
    },
    setOptions() {
      const _this = this
      let count = [1, 2, 3, 4, 5, 6, 7]
      const option = {
        // 提示框(鼠标放到图上提示的内容)
        tooltip: {
          axisPointer: {
            type: 'shadow',
            // type: 'cross',  // 出现标线和刻度文本
            // crossStyle: {
            //   color: '#999' // 标线颜色
            // }
          },
          formatter: function (params) {
            const transformedValue = params.name + ':' + '</br>' + '百分比:' + count[params.dataIndex] + '%' + '</br>' + '数量:' + params.value + '份'// 自定义转换逻辑
            return transformedValue // 返回转换后的内容
          }
        },
        // 图例
        legend: {
          type: 'scroll', //图例可翻页
          top: '80%',  //设置图例位置
          left: '80%',
          pageIconColor: 'blue', //翻页小图标颜色
          textStyle: {
            color: 'red' // 图例文字颜色
          },
          data: ['图例1', '图例2', '图例3', '图例4', '图例5', '图例6', '图例7', '图例8', '图例9']
        },
        // 调节图显示 
        // 如果有内容没显示全,可以通过调节你这个图的上下左右来显示,例如x轴的题目没显示全
        // 可通过grid.right来调节,支持px、支持%、支持数值、支持'left', 'center', 'right' 
        grid: {
          top: '30',
          left: '30px',
          right: '14%',
          bottom: 'center'
        },
        // x轴
        xAxis: [
          {
            name: '今天星期几?',
            type: 'category',
            data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'],
            axisTick: {
              alignWithLabel: true // 是否显示x轴刻度
            },
            axisLabel: {
              rotate: -20, // 旋转角度
              interval: 3 //间隔几个显示一个x轴标签(间隔3个就只显示 星期一/星期五,为0就是周一到周日都显示)
            },
          }
        ],
        // y轴(参数和x轴一样)
        yAxis: [
          {
            show: true,//是否显示y轴
            type: 'value', //数值
            splitLine: {// 分割线配置
              lineStyle: {
                color: 'yellow', //分割线颜色
                width: 5 //分割线大小
              }
            }
          }
        ],
        series: [
          {
            name: '图例1',
            color: 'black',
            data: [320, 332, 200, 334, 390, 330, 510],
            type: 'bar', //柱状图
            stack: 'Ad',//设置堆叠(字符串相同的堆叠到一起)
            // emphasis.focus在高亮图形时，是否淡出其它数据的图形已达到聚焦的效果。支持如下配置：
            // 'none' 不淡出其它图形，默认使用该配置。(默认都在)(图例二)
            // 'self' 只聚焦（不淡出）当前高亮的数据的图形。(只留当前鼠标所在自己)(图例三)
            // 'series' 聚焦当前高亮的数据所在的系列的所有图形(留全部系列自己)。
            emphasis: { //高亮的图形与标签样式
              focus: 'series'
            },
            markLine: { // 当前数据最大值到最小值
              lineStyle: {
                type: 'dashed' //虚线
              },
              data: [[{ name: '最小值到最大值', type: 'min' }, { type: 'max' }]]
            },
            itemStyle: {
              normal: {
                label: {
                  show: true, // 数值开启显示
                  position: 'top', // 在上方显示(bar柱状图默认在中间)
                  textStyle: { // 数值样式
                    color: 'black', //数值颜色
                    fontSize: 18 //数值字体大小
                  }
                }
              }
            }
          },
          {
            name: '图例2',
            type: 'bar', //柱状图
            stack: 'Ad',
            emphasis: {
              focus: 'none'
            },
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '图例3',
            type: 'bar',
            stack: 'Ad',
            emphasis: {
              focus: 'self'
            },
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: '图例4',
            type: 'bar',
            stack: 'Ad',
            emphasis: {
              focus: 'series'
            },
            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: '图例5',
            type: 'bar',
            data: [862, 1018, 964, 1026, 1679, 1600, 1570],
            emphasis: {
              focus: 'series'
            }
          },
          {
            name: '图例6',
            type: 'bar',
            barWidth: 5,
            stack: 'Search Engine',
            emphasis: {
              focus: 'series'
            },
            data: [620, 732, 701, 734, 1090, 1130, 1120]
          },
          {
            name: '图例7',
            type: 'bar',
            stack: 'Search Engine',
            emphasis: {
              focus: 'series'
            },
            data: [120, 132, 101, 134, 290, 230, 220]
          },
          {
            name: '图例8',
            type: 'bar',
            stack: 'Search Engine',
            emphasis: {
              focus: 'series'
            },
            data: [60, 72, 71, 74, 190, 130, 110]
          },
          {
            name: '图例9',
            type: 'bar',
            stack: 'Search Engine',
            emphasis: {
              focus: 'series'
            },
            data: [62, 82, 91, 84, 109, 110, 120]
          }
        ]
      };

      this.chart.setOption(option)
      this.chart.on('click', function (params) {
        console.log(params);
        _this.$emit('goParent', params)
      })
    }
  }
}
</script>

 高度与宽度是要写的,不然不显示

<style scoped>
#main {
  width: 900px;
  height: 400px;
}
</style>