vue数据可视化ECharts

vue数据可视化ECharts

官网：https://echarts.apache.org/zh/index.html
介绍：
charts，全称Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，能够流畅的运行在PC以及移动设备上，兼容当前绝大部分浏览器。为我们许多提供直观，生动，可交互，可高度个性化定制的数据可视化图表。能够支持折线图、柱状图、散点图、K线图、饼图、雷达图、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表，同时提供标题，详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交 互组件，支持多图表、组件的联动和混搭展现。

安装ECharts

npm install echarts --save

在mian.js中引入ECharts

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

创建ECharts模型

methods: {
    drawChart () {
        var myEchart = this.$echarts.init(document.getElementById('main'))
        var option = {
          xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: [120, 200, 150, 80, 70, 110, 130],
              type: 'bar'
            }
          ]
        }
        myEchart.setOption(option)
    }
}

调用模型

mounted () {
    this.drawChart()
  }

创建占位dom

<div id='main' style="width:400px,height:200px">div>

效果：