在vue中如何使用Echarts

1.npm i echarts

2.新建一个组件

3.代码模板

<template>
//定义一个容器
<div class="chartBox" ref="line"></div> 
</template>

<script>
// 在echarts的示例中 点击完整代码 开启按需引入 将var chartDom = document.getElementById('main')前面的核心块的引入 全部cv过来
import * as echarts from 'echarts/core' 
import { TitleComponent, ToolboxComponent, TooltipComponent, GridComponent, LegendComponent, } from 'echarts/components'
import { LineChart } from 'echarts/charts' 
import { UniversalTransition } from 'echarts/features' 
import { CanvasRenderer } from 'echarts/renderers' 
echarts.use([ TitleComponent, ToolboxComponent, TooltipComponent, GridComponent, LegendComponent, LineChart, CanvasRenderer, UniversalTransition, ])

//data里面的option写实例里面的option的内容
export default { 
name: 'LineChart',
data() { 
     return { 
         options: { 
                   }, 
             } 
        },
//mounted中初始化并调用echarts        
mounted() { 
const myEcharts = echarts.init(this.$refs.line)
myEcharts.setOption(this.options) }, }
</script>

<style scoped>
//给容器设置宽高
.chartBox { 
      width: 100%; 
      height: 500px; 
      } 
</style>

4.引入组件使用即可