Vue2使⽤Echarts创建图表实例代码
在后台管理系统中，图表是⼀个很普遍的元素。⽬前常⽤的图标插件有 charts,  Echarts, highcharts。这次将介绍 Echarts 在Vue 项⽬中的应⽤。
⼀、安装插件
使⽤ cnpm 安装 Echarts
cnpm install echarts -S
和之前介绍的 axios 类似，echarts 也不能通过 Vue.use() 进⾏全局调⽤
通常是在需要使⽤图表的 .vue ⽂件中直接引⼊
import echarts from 'echarts'
也可以在 main.js 中引⼊，然后修改原型链
Vue.prototype.$echarts = echarts
然后就可以全局使⽤了
let myChart = this.$echarts.ElementById('myChart'))
⼆、创建图表setoption
⾸先需要在 HTML 中创建图表的容器
需要注意的是，图表的容器必须指定宽⾼，也就是说 width，height 不能使⽤百分⽐，只能⽤ px
这样确实不够灵活，不过我们可以⽤ js 来改变 width 和 height，使图表容器能够⾃适应，具体的实现请往后看
然后在 mounted 中创建图表，具体的配置参考，这⾥不再赘述
三、按需引⼊
上⾯引⼊的 echarts 包含了所有图表，但有时候我们只需要⼀两个基本图表，这时候完整的 echarts 就显得累赘
假如只需要创建⼀个饼图，那么可以这么做：
// 引⼊基本模板
let echarts = require('echarts/lib/echarts')
// 引⼊饼图组件
require('echarts/lib/chart/pie')
// 引⼊提⽰框和图例组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/legend')
之所以使⽤ require ⽽不是 import，是因为 require 可以直接从 node_modules 中查，⽽ import 必须把路径写全
四、适应容器
上⾯说过，图表的容器必须固定宽⾼，这确实是⼀个⽐较反⼈类的设定
为了解决这个问题，需要给图表容器外⾯再加⼀个容器，⽽这个外容器的宽⾼可以适应页⾯。上⾯的 <div class="charts"> 就是这样的外容器
let chartBox = ElementsByClassName('charts')[0]
let myChart = ElementById('myChart')
// ⽤于使chart⾃适应⾼度和宽度，通过窗体⾼宽计算容器⾼宽
function resizeCharts () {
myChart.style.width = chartBox.style.width + 'px'
myChart.style.height = chartBox.style.height + 'px'
}
// 设置容器⾼宽
resizeCharts()
let mainChart = echarts.init(myChart)
mainChart.setOption(options)
当页⾯加载的时候，将外容器的宽⾼，赋给图表容器
但这只是解决了页⾯加载时的⾃适应问题
如果在页⾯加载之后，仍需要图表⾃适应宽⾼，就需要⽤到 echarts 的
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。