你的位置:首页 > 信息动态 > 新闻中心
信息动态
联系我们

vue3.0 安装使用echarts

2021/12/20 18:38:39

1、安装 , 控制台输入, 默认echarts 5版本

npm i echarts -S     或
npm install echarts --save

2、引入  main.js, 全局注册

import * as echarts from 'echarts'

const app = createApp(App);

app.config.globalProperties.$echarts = echarts  //绑定实例

提示:初始化项目,main.js

createApp(App).mount('#app')
可修改为:
const app = createApp(App);

3、项目中使用echarts

        (1)初始化:
                var myChart = this.$echarts.init(document.querySelector('.echart'))   // .echart是放置图表的容器,可自定义,设置容器时一定要设置宽高,不设置会导致图表不显示走入误区。

        (2)定义option,根据自己需求定义,可在echarts官方网站
Apache EChartshttps://echarts.apache.org/zh/index.html        上查找自己需要的实例

                var option= {
                      xAxis: {

                                type: 'category',

                                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']

                      },

                      yAxis: {

                                type: 'value'

                      },

                      series: [

                                {

                                      data: [150, 200, 210, 218, 135, 147, 245],

                                      type: 'line'

                                    }

                        ]

                 }

        (3)设置数据

                myChart.setOption(option)

        即可看到自己设置的图表