Vue中引入-ECharts折线图

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