在uniapp把echarts做成元件使用

前提是已經安裝好echarts了

npm install echarts --save      

1.子元件

<template>
  <!-- 折線圖 -->
  <view>
    <view style="width:100%;height:560rpx;" :id="echarts" class="echarts"  ref="echarts"></view>
  </view>
</template>

<script>
// 引入echarts
import echarts from '../static/app-plus/echarts.min.js'
export default {
  name: 'my-charts',
  props: {
    // 接收父元件傳遞過來的資訊
    xData: {
      type: Array,
      default: ()=>[]
    },
  yData: {
    type: Array,
    default: ()=>[]
  }
  },
  data () {
    return {}
  },
  methods: {
    drawChart () {
      const vm = this
      // 基于準備好的dom，初始化echarts執行個體
     var myChart =echarts.init(document.getElementById(this.echarts))
   myChart.setOption({
   //dataZoom-inside 内置型資料區域縮放元件 所謂内置 1平移：在坐标系中滑動拖拽進行資料區域平移。2縮放：PC端：滑鼠在坐标系範圍内滾輪滾動（MAC觸控闆類同;移動端：在移動端觸屏上，支援兩指滑動縮放。
      dataZoom: [
      {
        type: 'inside', //1平移 縮放
        throttle: '50', //設定觸發視圖重新整理的頻率。機關為毫秒（ms）。
        minValueSpan: 6, //用于限制視窗大小的最小值,在類目軸上可以設定為 5 表示 5 個類目
        start: 1, //資料視窗範圍的起始百分比 範圍是：0 ~ 100。表示 0% ~ 100%。
        end: 50, //資料視窗範圍的結束百分比。範圍是：0 ~ 100。
        zoomLock: true //如果設定為 true 則鎖定選擇區域的大小，也就是說，隻能平移，不能縮放。
      }
      ],
      // 主要用來控制圖表四周留白
      grid: {
      left: '15%',
      top: '10%'
      },

      // 提示框元件
      tooltip: {
      trigger: 'axis', //坐标軸觸發，主要在柱狀圖，折線圖等會使用類目軸的圖表中使用。
      backgroundColor: '#505050', //提示框浮層的背景顔色。
      textStyle:{
          color: '#ffffff' // 坐标軸線線的顔色。
      },
      
      // 自定義提示框内容
      formatter: function (params, ticket, callback) {
        var text = params[0].data.date + ': ' + params[0].data.value;
        return text;
      },
         position: function (point, params, dom, rect, size) {
           // 固定在頂部
           return 'top';
         }
      
      },
      //直角坐标系 grid 中的 x 軸，
      xAxis: {
      type: 'category', //'category' 類目軸，适用于離散的類目資料，為該類型時必須通過 data 設定類目資料。
      nameTextStyle: {
         fontSize: 30
         },
      // 坐标軸軸線相關設定
      axisLine: {
        lineStyle: {
        color: '#E5E5E5' // 坐标軸線線的顔色。
        }
      },
      
      // 坐标軸刻度标簽(類目,簡單說就是x軸上的内容)的相關設定
      axisLabel: {
        //  是否顯示坐标刻度标簽(這了指是否顯示x軸上的月份)
        show: true,
        // 标簽文字的顔色
        color: '#000000'
      },
      
      axisPointer: {
        //去掉移動的訓示線
        type: 'line',
        // snap: true,
        handle: {
        show: true,
        color: '#969696',
        size:20
        }, 
      },
      //x軸刻度線設定
      axisTick: {
        show: true
      },
      // 類目資料，在類目軸（type: 'category'）中有效。
      data:this.xData
      },
      //直角坐标系 grid 中的 y 軸，
      yAxis: {
      type: 'value', //'value' 數值軸，适用于連續資料。
      // 坐标軸軸線相關設定
      axisLine: {
        show: false //y軸線消失
      },
      // 坐标軸刻度标簽(類目,簡單說就是x軸上的内容)的相關設定
      axisLabel: {
        show: true,
        // 标簽文字的顔色
        color: '#999'
      },
      //y軸刻度線設定
      axisTick: {
        show: false
      },
      splitNumber: 5 //坐标軸的分割段數，需要注意的是這個分割段數隻是個預估值，最後實際顯示的段數會在這個基礎上根據分割後坐标軸刻度顯示的易讀程度作調整.在類目軸中無效。
      },
      series: [
      {
        type: 'line', //折線圖是用折線将各個資料點标志連接配接起來的圖表，用于展現資料的變化趨勢。和全局設定type效果一樣,表示折線圖
        // 系列中的資料内容數組。數組項通常為具體的資料項。
        data:this.yData,
        // 折線條的樣式
        lineStyle: {
        color: '#ffaa00',
        width: 1
        },
        // 折線拐點的樣式
        itemStyle: {
        normal: {
          // 靜止時：
          color: '#ffaa00'
        },
        emphasis: {
          // 滑鼠經過時：
          color: '#ffaa00'
        }
        },
        symbol: 'emptyCircle', //拐點樣式
        symbolSize: 6 //拐點大小
      }
      ]
  })

    }
  },
  computed: {
    echarts() {
      return 'echarts' + Math.random()*100000
    }
  },
    mounted: function () {
        const vm = this
        vm.$nextTick(()=> {
            vm.drawChart()
      })
  },
  created: () => {}
}
</script>

<style scoped>
</style>      

2.父元件：示例

<template>
  <!-- 使用echarts元件的例子 -->
  <view>
    <my-echarts :xData="xData" :yData="yData"></my-echarts>
  </view>
</template>

<script>
  import myEcharts from '../../components/my-echarts/my-echarts.vue'
  export default {
    data() {
      return {
        yData: [
        {
          value: 1222,
          date: '2020年1月'
        },
        {
          value: 1020,
          date: '2020年2月'
        },
        {
          value: 1070,
          date: '2020年3月'
        },
        {
          value: 1001,
          date: '2020年4月'
        },
        {
          value: 1800,
          date: '2020年5月'
        },
        {
          value: 1200,
          date: '2020年6月'
        },
        {
          value: 1300,
          date: '2020年7月'
        },
        {
          value: 1030,
          date: '2020年8月'
        },
        {
          value: 1050,
          date: '2020年9月'
        },
        {
          value: 1800,
          date: '2020年10月'
        },
        {
          value: 1003,
          date: '2020年11月'
        },
        {
          value: 1070,
          date: '2020年12月'
        }
        ],
        xData: [
          '1月',
          '2月',
          '3月',
          '4月',
          '5月',
          '6月',
          '7月',
          '8月',
          '9月',
          '10月',
          '11月',
          '12月'
      ]
      }
    },
     components: {
        myEcharts
      },
    methods: {
      
    },
    mounted: function() {
      const vm = this 
      vm.$nextTick(()=> {})
    } 
  }
</script>

<style>

</style>