Vue中引入-ECharts折线图

古城微笑少年丶 2023-10-03 19:58 3阅读 0赞

适用于vue2.0

也可以直接查看安装文档 [GitHub][]

1、安装全局组件(划重点)

npm install echarts vue-echarts
    
    npm i -D @vue/composition-api

1.1、main.js中引入全局组件

import ECharts from 'vue-echarts'
    import 'echarts'
    
    
    // 全局注册组件（也可以使用局部注册）
    Vue.component('ECharts', ECharts)

2、vue中html部分(此处根据我main.js中的全局注册组件的驼峰)

<e-charts
             class="chart"
             :option="option"
             ></e-charts>

3、vue中data值(此处我用到了random随机数)

optionData: [
            {
              time: '2022-8-9',
              value: Math.random() * 1000
            },
            {
              time: '2022-8-9',
              value: Math.random() * 1000
            },
            {
              time: '2022-8-9',
              value: Math.random() * 1000
            },
            {
              time: '2022-8-9',
              value: Math.random() * 1000
            },
            {
              time: '2022-8-9',
              value: Math.random() * 1000
            }
          ]

4、给折线数据加宽高就ok

.chart{
      height: 400px;
    }

[GitHub]: https://github.com/ecomfe/vue-echarts/blob/main/README.zh-Hans.md

发表评论取消回复

表情：

评论列表（有 0 条评论，3人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue+echarts实现疫情折线图

效果： ![6bffddbd52b149bd9295bb4562ec2b34.png][] 代码： <<template> <div>

刺骨的言语ヽ痛彻心扉/ 2024年04月01日 17:48/ 0 赞/ 61 阅读

相关 Vue中引入-ECharts折线图

适用于vue2.0 也可以直接查看安装文档 [GitHub][] 1、安装全局组件(划重点) npm install echarts vue-echarts

古城微笑少年丶/ 2023年10月03日 19:58/ 0 赞/ 4 阅读

相关【Vue】Vue 中引入 ECharts

目录 1、安装 2、在 main.js 中引入 3、在需要调用的页面中的 js 使用 4、最重要的一点！ -------------------- 介绍 Echa

谁践踏了优雅/ 2023年07月11日 08:41/ 0 赞/ 31 阅读

相关 echarts折线图

记录echarts折现图配置我们先来看看效果图 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10

拼搏现实的明天。/ 2022年11月18日 13:44/ 0 赞/ 291 阅读

相关 Vue中引入echarts

第一步：通过npm安装echarts依赖包 npm install echarts --save 第二步：在js中引用 import as ec

清疚/ 2022年10月19日 04:07/ 0 赞/ 276 阅读

相关 vue项目中引入echarts

关于如何搭建vue项目，引入vue-router和vuex。请移步 [vue项目中引入vue-router][vue_vue-router] [vue项目中引入vu

àì夳堔傛蜴生んèń/ 2022年09月10日 02:14/ 0 赞/ 382 阅读

相关 vue-cli 引入echarts

1. [echarts官网传送门][echarts] 2. vue-cli如何引入详情点击查看：[在 webpack 中使用 ECharts][webpack _ ECh

电玩女神/ 2022年05月16日 11:44/ 0 赞/ 282 阅读

相关 vue中引入echarts

一、全局引入 1.通过以下命令安装Echarts ![在这里插入图片描述][20190429213452843.png] 2.main.js中引入echarts 和

骑猪看日落/ 2022年04月24日 22:10/ 0 赞/ 426 阅读

相关 echarts折线图

效果图 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0J

我不是女神ヾ/ 2022年04月18日 04:09/ 0 赞/ 372 阅读

相关 vue引入echarts

效果图: ![1263537-20190703092539204-1883224357.jpg][] 1.安装Echarts : npm ins

喜欢ヅ旅行/ 2021年11月11日 01:40/ 0 赞/ 479 阅读