Vue项目中引入Echarts图表

Vue中使用echarts

安装echarts依赖

npm install echarts -S

如果网速很慢,可以使用淘宝镜像,前提是本地已经安装了淘宝源

npm install -g cnpm --registry=https://registry.npm.taobao.org

cnpm install echarts -S

初始化vue项目

这里使用git上开源的vue管理后台项目

克隆地址 https://panjiachen.gitee.io/vue-element-admin-site/zh/

使用基础模板就可以完成演示,项目启动有详细介绍,这里不做多的介绍了

附上集成方案的首页图

集成方案中也有引用可图标,如觉得这些图表不够,接下来介绍一下图表引用过程

echarts使用

首先需要全局引入

在main.js中

// 引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts



// 可以引入自己需要的,也可以全部引入
import echarts from 'echarts'

页面代码(Echarts.vue)

<template>
  <div id="myChart" :style="{width: '600px', height: '300px'}"></div>
</template>
<script>
// 可以引入自己需要的,也可以全部引入
import echarts from 'echarts'
export default {
  name: 'Echarts',
  data () {
    return {
    }
  },
  mounted(){
    this.drawLine();
  },
  methods: {
    drawLine(){
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        // 绘制图表
        myChart.setOption({
            title: { text: '柱状图' },
            tooltip: {},
            xAxis: {
                data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
            },
            yAxis: {},
            series: [{
                name: '运行中',
                type: 'bar',
                data: [14, 20, 36, 10, 10, 20]
            }]
        })
    }

  }
}
</script>

组件引入展示

以上是简单的echarts表的使用,数据的动态获取可以自行百度前后端交互的配置,定时获取可以使用定时器或者如下:

//第一种 watch options变化 利用vue的深度 watcher，options 一有变化就重新setOption
watch: {
  options: {
    handler(options) {
      this.chart.setOption(this.options)
    },
    deep: true
  },
}
//第二种 只watch 数据的变化 只有数据变化时触发ECharts
watch: {
  seriesData(val) {
    this.setOptions({series:val})
  }
}

其实都差不多，还是要结合自己业务来封装。后面就和平时使用 ECharts 没有什么区别了。题外话 ECharts 的可配置项真心多，大家使用的时候可能要花一点时间了解它的 api 的。知乎有个问题：百度还有什么比较良心的产品？答案：ECharts，可见 ECharts 的强大与好用。

ECharts表查询

通过百度可以搜到很多案例,这里介绍官网引用

官网: https://echarts.baidu.com/

ps:官网很酷炫哦

文档: https://efe.baidu.com/tags/ECharts/

重点来了

资源: https://gallery.echartsjs.com/explore.html#sort=rank_{timeframe=all}author=all