echarts 入门级 使用方法

1.安装

cnpm i  echarts --save

2.全局引用

import * as echarts from 'echarts'//引用echarts

Vue.prototype.$echarts = echarts  //注册组件

let myChartDoc = document.getElementById('myChart');

 // 基于准备好的dom，初始化echarts实例

 that.myChart = that.$echarts.init(myChartDoc)

3.局部引用

    按官网操作：

            https://echarts.apache.org/handbook/zh/basics/import

4.容器定宽高

<!-- 设置有高度的父容器 -->

  <div id="myChart" style="width:800px;height:500px"></div>

5.图表定宽高

let myChartDoc = document.getElementById('myChart');

                // 基于准备好的dom，初始化echarts实例

                that.myChart = that.$echarts.init(myChartDoc,null,{

                        width:800,

                        height:500                 

                  });

6.根据窗口自适应宽高

        

<template>
    <!-- 设置有高度的父容器 -->
    <div id="myChart" style="width:100%;height:500px"></div>
</template>

<script>
export default {
    name:'echartsDemo1',
    data(){
        return{
            msg:'测试ECAHRTS',
            myChart:null,
        }
    },
    mounted(){
        this.initEchartsData();
    },
    methods:{
        /**
         * 初始化 图表
         */
        initEchartsData(){
            let that = this;
            that.$nextTick(function () {
                let myChartDoc = document.getElementById('myChart');
                // 基于准备好的dom，初始化echarts实例
                that.myChart = that.$echarts.init(myChartDoc);
                // 绘制图表
                let option = {
                    xAxis: {
                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                    },
                    yAxis: {},
                    series: [
                        {
                        type: 'bar',
                        data: [23, 24, 18, 25, 27, 28, 25]
                        },
                        {
                        type: 'bar',
                        data: [26, 24, 18, 22, 23, 20, 27]
                        }
                    ]
                };
                that.myChart.setOption(option,true)
                setTimeout( function  (){
                    window.onresize =  function  () {
                        that.myChart.resize();
                    }
                },200)
            })
        },
    },
}
</script>