echarts+vue

echarts+vue

//echarts的npm安装
npm install echarts --save
//or （或者）
cnpm install echarts --save

//main.js
import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts//全局使用this.$echarts

<template>
	<div ref="top" class="top-child-foot"></div>
</template>
<script>
     export default {
         data() {
      		return {
        		topChart: null,
     		 }
    	 },
         mounted() {//一定要在mounted里面执行方法
             //为什么要在这个里面呢，因为在这个钩子里面dom开始渲染图表
      		this.initTopCharts()
    	},
         methods: { 
      initTopCharts() {
        this.topChart = this.$echarts.init(this.$refs.top);
        // 使用刚指定的配置项和数据显示图表。
        this.topChart.setOption({
          color: ['#5BB9FF'],//调色板，多个请在后面加
          title: {
            text: '培训人数情况'
          },
          tooltip: {
            trigger: 'item',//柱形图请使用item
          },//提示框组件
          legend: { //图例组件，就是上面的图例
            padding: [10, 0, 0, 0],
          },
          toolbox: {//工具箱组件
            feature: {
               saveAsImage: {
                 type: 'png'
               },//下载
               magicType: {
                 type: ['line', 'bar',]//柱形和折线的切换
               },
            }
          },
          grid: {//网格配置控制指标坐标系的大小
            left: '2%',
            right: '2%',
            containLabel: true//是否显示刻度标签
          },
          xAxis: {
            axisTick: {
              alignWithLabel: {
                boundaryGap: true//x轴坐标在数线上
              }
            },
            type: 'category',//
            data: ["地区1", "地区2"]
          },
          yAxis: {
            type: 'value'
          },
          //系列图标配置
          series: [{
            //想显示图例，可以在这个series里面添加name属性
            type: 'bar',//柱形图
            barWidth: '50%',//调整柱形图宽度大小
            data: [170, 100]//y轴的数据
            //symbolSize: 13 这个是折线图里面拐点的大小
          }]
        })
        window.addEventListener('resize', () => {
          this.topChart.resize()
        })//适配大小屏
      },
         }
     }
</script>