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

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