[JavaScript知识库]vue-cil2和echarts实现图

一，项目提前准备

1.创建脚手架，删除多余部分（helloworld）

2.安装echarts? ? ?npm install echarts --save

3.在components文件夹中创建组件echarts.vue文件

4.在App.vue文件中的template模板中引入echarts

<template>
<div id='app'>
   <echarts></echarts>
</div>
</template>

注册echarts.vue的组件

<script>
  export default{
    name:'App',
    data(){
      return{
      }
    },
    components:{
      echarts:()=>import("./components/echarts.vue")
    },
  }
</script>

5.main.js中添加代码

import echarts from 'echarts/dist/echarts.min.js'
import china from 'echarts/map/json/china.json'
echarts.registerMap('china', china)
Vue.prototype.$echarts = echarts

6.继续补全echarts.vue文件

（1）在template中放置div，限制宽高

<template>
    <div class="container">
       <div ref="echarts" style="width:100%;height:376px"></div>
    </div>
</template>

（2）或者在script标签中引入包

    import echarts from 'echarts';
    import 'echarts/map/js/china.js'
    import 'echarts/map/js/world.js';

export default {
        data(){
            return{                        
            }
        },
        methods: {
            drawLine() {
                // 初始化echarts实例
                this.chart = echarts.init(this.$refs.echarts)
                this.setoption()               
            },
            setoption(){
                this.chart.setOption({
                //写入想实现的echarts格式代码
                })
            }
        },
        mounted() {
            this.drawLine();
        },
    }