Vue中Echarts的简单使用

1.安装Ecahrts依赖

    npm install echarts -S

2.全局引入

    在main.js中

        import echarts from 'echarts'

        Vue.prototype.$echarts = echarts

3.组件中使用

    一个具备宽高的DOM容器,如下:

        

    初始化Echarts实例对象

        注意:初始化应当在mounted这个生命周期中进行

        let myChart = this.$echarts.init(document.getElementById('myChart'))

    调用setOption()方法绘制图表

        myChart.setOption(option)

        option:

            1.首先进入https://www.echartsjs.com/examples/

            2.其次在侧边栏选择所需要的图表类型

            3.然后选择所需要的图表样式点击进入展示界面

            4.最后复制左侧option对象放到setOption方法中

        注意:option中还有很多效果配置,有需要的可以根据所选图表进行搜索

你可能感兴趣的:(Vue中Echarts的简单使用)