转: vue脚手架中简单使用echarts 折线图为例. A.1.安装 npm install echarts -S 2 main.js中引入echarts import echarts from ‘echarts’; Vue.prototype.$echarts = echarts; 3 组件中 import echarts from ‘echarts’; C.导入ECharts并使用 1. 导入 echarts 2. 为ECharts准备一个具备大小（宽高）的Dom => div 3. 在挂载钩子函数中基于准备好的dom，初始化echarts实例 4. 准备数据和配置项options(在data中设置) 5. 展示数据
<template> <div> <h3>数据报表</h3> <!-- 面包屑导航 --> <el-breadcrumb separator="/"> <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item> <el-breadcrumb-item>数据统计</el-breadcrumb-item> <el-breadcrumb-item>数据报表</el-breadcrumb-item> </el-breadcrumb> <!-- 卡片视图区域 --> <el-card> <div id="main" style="width:750px;height:400px;"></div> </el-card> </div> </template> <script> //导入echarts import echarts from 'echarts' //导入lodash import _ from 'lodash' export default { data() { return { //需要跟请求的折线图数据合并的options options: { title: { text: '用户来源' }, tooltip: { trigger: 'axis', axisPointer: { type: 'cross', label: { backgroundColor: '#E9EEF3' } } }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: [ { boundaryGap: false } ], yAxis: [ { type: 'value' } ] } } }, created() {}, async mounted() { //在页面dom元素加载完毕之后执行的钩子函数mounted // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')) //准备数据和配置项 //发送请求获取折线图数据 const { data: res } = await this.$http.get('reports/type/1') if (res.meta.status !== 200) { return this.$message.error('获取折线图数据失败') } //合并res.data和this.options const result = _.merge(res.data,this.options) // 使用获取的数据展示图表 myChart.setOption(result) }, methods: {} } </script> <style lang="less" scoped> </style>