echarts可视化组件基础使用

1.在vue项目中npm运行

npm install echarts --save

2.在main.js中引入echarts

// 引入echarts-5.0
import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts

3.新建组件在组件中使用

<template>
  <div id="container" style="width: 600px; height: 300px"></div>
</template>

<script>
export default {
  name: 'surface',
  data () {
    return {
      option: {
        title: {
          text: '某站点用户访问来源',
          top: '5%',
          left: 'center'
        },
        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',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            }
          }
        ]
      }
    }
  },
  mounted () {
    let chartDom = document.getElementById('container')
    let myChart = this.$echarts.init(chartDom)
    myChart.clear()
    myChart.setOption(this.option)
  },
  methods: {}
}
</script>

4.在需要使用组件位置引用

import surface from "../components/surface";

5.组件进行注册

components:{
    surface
  }

6.在适当位置进行使用

<surface></surface>