vue-cli項目使用echarts系列

項目源碼地址:  https://github.com/shengbid/echarts-series,如果有幫助記得給個star哈,碼字不易,謝謝各位大佬

這個項目主要是對echarts中一些常用屬性進行修改,用頁面操作的方式,能更加直觀的對echarts進行配置

主要分為兩部分:1. echarts常用屬性操作; 2.echarts常見圖表展示

項目截圖: 

 

對於一些相對復雜的圖表,例如地圖,k線圖,我也有單獨寫博客注明,地址可以看文末的推薦鏈接

項目是vue-cli + echarts + elementUI

在vue-cli中使用echarts步驟

1. 安裝echarts  npm i echarts -S

2. 在main.js中引入,注意,要用require方式引入,引入后綁定在vue原型上,方便在項目中使用

var echarts = require('echarts')
Vue.prototype.$echart = echarts 

3. 頁面中使用

<template>
  <div class="line-container">
    <div>
      <!-- 需要一個元素展示echarts,設置好width,height -->
      <div id="mapChart" style="width: 900px;height:500px;"></div>
    </div>
  </div>
</template>

<script>
import chinaJson from '@/utils/map/china.json' // 地圖json數據引入

export default {
  name: 'mapChart',
  data() {
    return {
      option: {
        title: { 
          text: '中國地圖',
          subtext: '鼠標縮放比例大於2.5展示名稱'
         },
        tooltip: {
          trigger: 'item'
        },
        series: [{
          type: 'map',
          map: 'china',
          zoom: 1.2,
          roam: true
        }]
      },
      mapChart: null
    }
  },
  mounted() {
    // 在mounted中初始化echarts
    this.getMapChart()
  },
  methods: {
    // 設置折線圖
    getMapChart() {
      this.mapChart = this.$echart.init(document.getElementById('mapChart'))

      this.$echart.registerMap('china', chinaJson);
      this.mapChart.setOption(this.option)
</script>

 

echarts系列文章:

vue-cli使用echarts系列之K線圖Candlestickhttps://www.cnblogs.com/steamed-twisted-roll/p/14368766.html

vue-cli使用echarts系列之漣漪效果地圖effectScatterhttps://www.cnblogs.com/steamed-twisted-roll/p/14379169.html

vue-cli使用echarts系列之地圖type: map https://www.cnblogs.com/steamed-twisted-roll/p/14378535.html