Vue–使用Echare 图表

Vue---Echare 图表 的基本使用

1. npm install echarts vue-echarts
   npm i -D @vue/composition-api

2. 在main.js 当中（全局引用）

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

    

3. 局部页面当中引用

   import * as echarts from 'echarts'

    

4. 在方法当中完成地下的数据是死的  可以连接api动态化数据

   <template>
     <div class="page">
         <div id="main" style="width:400px;height:400px"></div>
     </div>
   </template>
   ​
   <script type="text/ecmascript-6">  //这块是单页面使用
   import * as echarts from 'echarts'
   export default {
     data() {
       return {
         option: {
           xAxis: {
             type: 'category',
             data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],  //这块是底部的描述
           },
           yAxis: {
             type: 'value',
           },
           series: [
             {
               data: [150, 230, 224, 218, 135, 147, 260],  //这块是数据
               type: 'line',   //这块显示图形的格式
             },
           ],
         },
       }
     },
     components: {},
     methods:{
         getECharts(){   //定义方法获取id为main的标签    然后显示图表
             var chartDom = document.getElementById('main');
             var myChart = echarts.init(chartDom);
             myChart.setOption(this.option)
         }
     },
     mounted(){
         this.getECharts();   //这块需要挂载    需要在数据显示之前把图形显示出来
     }
   }
   </script>
   ​
   <style scoped>
   </style>
   ​

   Echare官网:https://echarts.apache.org/examples/zh/index.html#chart-type-pie

               一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一