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