美文网首页vue
Vue中Echarts的简单使用

Vue中Echarts的简单使用

作者: 郭禹_7639 | 来源:发表于2019-02-15 11:45 被阅读170次

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

    相关文章

      网友评论

        本文标题:Vue中Echarts的简单使用

        本文链接:https://www.haomeiwen.com/subject/kdrpeqtx.html