关于 vue2 图表的 使用

一个 小爬菜 ,   在 不断 学习 使用中 , 遇见的 各种 问题 , 各种百度 ,以及 实际 操作验证可能性 ,

npm install echarts vue-echarts

npm i -D @vue/composition-api

-D 是 —sav-dev 缩写 一个 开发库

import ECharts from 'vue-echarts'

import "echarts"

全局引入:

Vue.component('ECharts' , ECharts)

Vue.config.productionTip = false

在 页面 的 使用

<e-charts class="ehart" [//]: # (给一个 基本的 高 或者 宽)

:option = "option" >

option来自 data

data中 :

option = {

xAxis: {

type: 'category',

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

},

yAxis: {

type: 'value'

},

series: [

{

  data: [150, 230, 224, 218, 135, 147, 260],

  type: 'line'

}

]

};

那么恭喜 你 基本 引入成功啦   

 最后 推荐 小破站up 主 前端鱼  , 十分 感谢 他的干货视频

感谢他的视频 : 【数据可视化】在vue中使用echarts_哔哩哔哩_bilibili