echarts网站::快速上手 - Handbook - Apache ECharts
学习视频链接:【数据可视化】在vue中使用echarts_哔哩哔哩_bilibili
gethup学习网站:GitHub: Let’s build from here · GitHub (kgithub.com)
安装:
-
导入:echarts
npm install echarts vue-echarts
-
要在 Vue 2(<2.7.0)下使用
vue-echarts
,需要确保@vue/composition-api
已经安装npm i -D @vue/composition-api
-
重启项目:
-
在main.js中全局注册
import 'echarts' import ECharts from 'vue-echarts' // 全局注册组件(也可以使用局部注册) Vue.component('ECharts', ECharts)
-
在需要渲染的页面,添加DOM结构:
<template> <div> <e-charts class="chsrt" :option="option"></e-charts> </div> </template>
-
在data中添加图标样式配置项
export default { data () { return { option: { xAxis: { data: ['A', 'B', 'C', 'D', 'E'] }, yAxis: {}, series: [ { data: [10, 22, 28, 23, 19], type: 'line', smooth: true } ] } } } }
-
设置图标的大小
<style> .chsrt{ width:84vw; height:90vh; } </style>