vue+echarts实现柱状图、曲线图、饼状图等

首先安装echarts插件

 npm install echarts --save

在使用的组件引入echarts插件

import myCharts from '../myCharts/index.vue'

实现图表组件化代码如下

<!-- 
title   @string 标题
legend:[
  data  @Arrary 视图示例
]
tooltip @Object 提示框
xAxis:[
  data  @Array  视图x轴
]
yAxis:[
  data  @Array  视图y轴
]
series:[
  {
    type   @string 视图类型 值 柱状图-bar,折线图-line,平画图-type:'line'smooth:true,面-asesStyle:{color:'#f00'},饼状图-pie
    data   @Array  数据源
    name   @string  图名称
  }
]
-->

<template>
    <div>
      <!-- id设置为动态的，因为同一页面同时使用同一个id会被认为是一个图表 -->
      <div :style="{height: chartH +'px',width: chartW + 'px'}" :id="chartsId"></div>
    </div>
</template> 

<script>
  import * as echarts from 'echarts'
  export default {
    name: 'myCharts',
    data(){
      return{
        myEcharts:null,
        cahrtData:null,
        
        // options:{
        //   title:{
        //     text:"柱状图"
        //   },
        //   legend:{
        //     data:['支出','收入']
        //   },
        //   tooltip:{},
        //   xAxis:{
        //     data:["1月","2月","3月","4月","5月","6月","7月"]
        //   },
        //   yAxis:{},
        //   series:[
        //     {
        //       type:"bar",
        //       data:['20','30','40','50','60','70','80'],
        //       name:'支出'
        //     },
        //     {
        //       type:"bar",
        //       data:['20','30','40','50','60','70','80'],
        //       name:'收入'
        //     }
        //   ]
        // }
      }
    },
    props:{
        options:{
            title:{
            text:"柱状图"
            },
            legend:{
            data:[]
            },
            tooltip:{},
            xAxis:{
            data:[]
            },
            yAxis:{},
            series:[
            {
                type:"bar",
                data:[],
                name:''
            },
            {
                type:"bar",
                data:[],
                name:''
            }
            ]
        },
        chartsId:{
            type:String,
            default:"myChart"
        },
        chartW:{
          type:Number,
          default:600
        },
        chartH:{
          type:Number,
          default:400
        }
    },
    computed:{
    },
    watch:{
      //options需要深度监听，因为options是一个对象，不深层监听对象内的属性值改变是无法浅监听的
      options:{
        handler(val){
          //监听到内部属性值发生变化时，更新charts视图
          this.myEcharts.setOption(this.options)
        },
        //开启深度监听
        deep:true
      }
    },
    methods:{
      //柱状图
      initEchart(){
        //初始化chart视图，动态获取渲染视图的div
        this.myEcharts=echarts.init(document.getElementById(`${this.chartsId}`))
        this.myEcharts.setOption(this.options)
      }
    },
    mounted(){
      this.initEchart()
    }
  }
</script>

引用组件示例如下

<template>
  <div class="charts">
    <myCharts :options="options"></myCharts>
    <myCharts chartsId="myLineChart" :options="options1"></myCharts>
  </div>
</template>

<script>
import myCharts from '../myCharts/index.vue'
export default{
  components:{myCharts},
  data(){
    return{
      options:{
          title:{
            text:"柱状图"
          },
          legend:{
            data:['支出','收入']
          },
          tooltip:{},
          xAxis:{
            data:["1月","2月","3月","4月","5月","6月","7月"]
          },
          yAxis:{},
          series:[
            {
              type:"bar",
              data:['20','30','40','50','60','70','80'],
              name:'支出'
            },
            {
              type:"bar",
              data:['20','30','40','50','60','70','80'],
              name:'收入'
            }
          ]
        },
        options1:{
          title:{
            text:"曲线图"
          },
          legend:{
            data:['存款','贷款']
          },
          tooltip:{},
          xAxis:{
            data:["1月","2月","3月","4月","5月","6月","7月"]
          },
          yAxis:{},
          series:[
            {
              type:"line",
              data:['1220','230','4440','5050','1060','1170','2280'],
              name:'存款'
            },
            {
              type:"line",
              data:['200','300','400','500','60','700','80'],
              name:'贷款'
            }
          ]
        }
    }
  }
}
</script>

<style>
.charts{
  display: flex;
  justify-content: start;
}
</style>

最后示例运行结果视图