vue引入echarts.min.js,vue+echart
这篇文章主要介绍了Vue-cli3中如何引入展示并实现自适应，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
目录
如何引入展示并实现自适应效果脚手架使用展示并封装展示组件1.导入电子海图2。封装展示组件3.父组件引用测试
如何引入ECharts并实现自适应
效果
1. 安装echarts
新公共管理安装电子海图
2. components/echarts/index.vue
模板
style={height:height，width:width} /
/模板
脚本
从"电子海图"导入电子海图
要求( e图表/主题/马卡龙)//电子海图主题
从" @/utlis/index.js "导入{去反跳}
常量动画持续时间=6000
导出默认值{
道具：{
类名：{
类型：字符串，
默认："图表"
},
宽度：{
类型：字符串，
默认值："100%"
},
高度：{
类型：字符串，
默认值："100%"
},
//数据源
echartsData: {
类型：对象，
默认值：{}
},
},
data() {
返回{
图表：空，
}
},
观察：{
},
//初始化
已安装(){
this.initChart()
this.resizeHandler=去抖(()={
如果(此图){
this.chart.resize()
}
}, 100)
窗户。addevent侦听器( resize ，this.resizeHandler)
},
//销毁
销毁前(){
如果(!this.chart) {
返回
}
窗户。移除事件侦听器( resize ，this.resizeHandler)
this.chart.dispose()
this.chart=null
},
方法：{
initChart() {
this.chart=echarts.init(this .$埃尔，”马卡龙")
这个。图表。setoption(这个。echartsdata，动画持续时间)
}
}
}
/脚本
3. utlis/index.js
导出函数去抖(函数，等待，立即){
让超时，参数，上下文，时间戳，结果
const later=function() {
//据上一次触发时间间隔
const last=new Date() -时间戳
//上次被包装函数被调用时间间隔最后的小于设定时间间隔等待
如果(最后等待最后0) {
timeout=setTimeout(稍后等待-最后)
}否则{
超时=空
//如果设定为立即===真，因为开始边界已经调用过了此处无需调用
如果(!立即){
结果=func.apply(上下文，参数)
如果(!超时)上下文=参数=空
}
}
}
返回函数（.args) {
上下文=这个
时间戳=新日期()
const callNow=immediate！超时
//如果延时不存在，重新设定延时
如果(!timeout) timeout=setTimeout(稍后，等待)
如果（立即呼叫){
结果=func.apply(上下文，参数)
上下文=参数=空
}
回送结果
}
}
4. 在.vue 中使用 test/index.vue
模板
div id=test
echarts:echartsData= echartsData /
/div
/模板
脚本
从" @/components/echarts/index "导入展示
导出默认值{
组件：{
展示
},
data() {
返回{
echartsData: {
工具提示：{
触发器："轴",
axisPointer: { //坐标轴指示器，坐标轴触发有效
类型：影子//默认为直线，可选为：线条 阴影
}
},
网格：{
top: 10，
左："2%",
对："2%",
底部："3%",
containLabel: true
},
xAxis: [{
类型："类别",
数据：[周一,周二,周三,周四， Fri ，周六,周日],
轴棒：{
alignWithLabel: true
}
}],
亚西斯：[{
类型："值",
轴棒：{
显示：假
}
}],
系列：[{
名称： pageA ，
类型："条形",
堆栈："访问者",
条宽："60%",
数据：[79,52,200,334,390,330,220],
}, {
名称： pageB ，
类型："条形",
堆栈："访问者",
条宽："60%",
数据：[80,52,200,334,390,330,220],
}, {
名称： pageC ，
类型："条形",
堆栈："访问者",
条宽："60%",
数据：[30,52,200,334,390,330,220],
}]
}
}
}
}
/脚本
style lang=scss 范围
#测试{
宽度：100%；
身高：100%；
背景：仿古白；
位置：绝对；
top:0px；
底部：0px
}
/风格
Vue-cli使用ECharts并封装ECharts组件
1. 导入echarts
终端输入
cnpm安装电子海图-保存
main.js中介绍的
从“eCharts”导入*作为e charts；
vue . prototype . $ e charts=e charts；
2. 封装echarts组件
新组件echats.vue
首先要明确的是，Echarts图形必须满足四个刚性条件才能绘制：
准备容器)；有宽度和高度；每次绘图前需要初始化(init)；必须设置配置，否则无法绘制(选项)；更改数据时，必须传入已更改的数据，否则无法监控新数据(setoption)；1.容器注意，容器的宽度和高度可以通过v-bind绑定样式的参数styleObj(父组件引用它时传递)来设置，这样在应用echats组件时可以自由设置宽度和高度。
模板
div id= myChart :style= style obj ref= chart
/div
/模板
2.初始化配置因为初始化需要获取容器的dom，所以需要在mouted的生命周期中进行初始化。
已安装(){
//因为需要获得容器，所以必须挂载它
this.init()
},
方法：{
init(){
让图表=这个。$eCharts.init(this。$refs.chart)
let option={
xAxis: {
类型：“类别”，
数据：[周一，周二，周三，周四， Fri ，周六，周日]，
}，//X轴
YAxis: {type: value }，//Y轴
系列：[
{
数据：[120，200，150，80，70，110，130]，
类型：“条形”，
}]//配置项
}
chart.setOption(选项)
}
}
3. 父组件引用测试
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。