Vue中Echarts的简单使用

1.安装Ecahrts依赖

    npm install echarts -S

2.全局引入

    在main.js中

        import echarts from 'echarts'

        Vue.prototype.$echarts = echarts

3.组件中使用

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

        <div id="myChart" :style="{width: '300px', height: '300px'}">

    初始化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中还有很多效果配置,有需要的可以根据所选图表进行搜索

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容