适用于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;
}