vue3引入echarts,vue.js echarts
这篇文章主要给大家介绍的是vue2 vue3中使用展示的相关资料，下面文章会详细介绍该内容，感兴趣的小伙伴不要错过哟
目录
1、安装2、vue2中使用展示在主页。射流研究…文件中给定一个容器3、vue3中使用展示在根组件里引入埃沙特，一般是App.vue在需要使用的页面，定义差异然后在需要使用到展示的页面注射
1、安装
新公共管理安装电子图表-保存
2、vue2中使用Echarts
在main.js文件中
//引入展示
从"电子海图"导入电子海图
Vue.prototype.$echarts=echarts
给定一个容器
div id= myChart :style= { width: 300 px ，height: 300px}/div
展示初始化应在钩子函数已安装()中，这个钩子函数是在埃尔被新创建的虚拟机.$el替换，并挂载到实例上去之后调用
//引入基本模板
让e charts=require( e charts/lib/e charts )
//引入柱状图组件
需要(电子图表/库/图表/条形图)
//引入提示框和标题组件
需要( echarts/lib/component/tooltip )
要求(电子图表/库/组件/标题)
导出默认值{
姓名：你好，
data() {
返回{
消息："欢迎使用你的vue . j应用"
}
},
已安装(){
这个。drawline()；
},
方法：{
drawLine() {
//基于准备好的多姆，初始化展示实例
让我的图表=echarts。init(文档。getelementbyid( myChart ))
//绘制图表
标题：{
文本： 折线图堆叠
},
工具提示：{
触发器："轴"
},
图例：{
数据：[邮件营销, 联盟广告, 视频广告, 直接访问, 搜索引擎]
},
网格：{
左："3%",
对："4%",
底部："3%",
containLabel: true
},
工具箱：{
功能：{
saveAsImage: {}
}
},
xAxis: {
类型："类别",
边界差距：假，
数据：[周一, 周二, 周三, 周四, 周五, 周六, 周日]
},
亚西斯：{
类型："值"
},
系列：[
{
名称： 邮件营销，
类型："行",
堆栈： 总量，
数据：[120,132,101,134,90,230,210]
},
{
名称： 联盟广告，
类型："行",
堆栈： 总量，
数据：[220,182,191,234,290,330,310]
},
{
名称： 视频广告，
类型："行",
堆栈： 总量，
数据：[150,232,201,154,190,330,410]
},
{
名称： 直接访问，
类型："行",
堆栈： 总量，
数据：[320,332,301,334,390,330,320]
},
{
名称： 搜索引擎，
类型："行",
堆栈： 总量，
数据：[820,932,901,934,1290,1330,1320]
}
]
}
}
}
3、vue3中使用Echarts
因为设置中没有这个，而且这时候还没有渲染，所以在设置中，可以使用提供/注入来把统计图引入进来
在根组件里引入echart,一般是App.vue
从“电子海图”导入*作为展示
从“vue”导入{提供}
导出默认值{
名称："应用程序",
setup(){
提供(电子海图，电子海图)//提供
},
组件：{
}
}
这里需要注意的是从“电子海图”导入*作为埃查尔兹，不能从"电子海图"导入电子海图，这样会报错，因为5,0版本的展示的接口已经变成了下面这样：
导出{
EChartsFullOption作为EChartsOption，
连接，
断开连接，
处置，
getInstanceByDom，
getInstanceById，
获取地图，
初始化，
注册区域设置，
注册地图，
注册主题
};
在需要使用的页面，定义div
div id=" home-page-traffic _ chart " style= width:600 px；高度：280像素
然后在需要使用到Echarts的页面inject
导出默认值{
名称：数据页，
setup () {
const trafficData=ref({})
const echarts=inject(echarts )
onMounted(()={
const myChart=echarts。init(文档。getelementbyid(主页-流量图表))
//绘制图表
myChart.setOption({
标题：{
文本： 今日话务统计
},
工具提示：{
触发器："轴",
axisPointer: {
类型："阴影"
}
},
网格：{
左："3%",
对："4%",
底部："3%",
containLabel: true
},
xAxis: [
{
类型："类别",
数据：[周一,周二,周三,周四， Fri ，周六,周日],
轴棒：{
alignWithLabel: true
}
}
],
亚西斯：[
{
类型："值"
}
],
系列：[
{
名称： 直接访问，
类型："条形",
条宽："60%",
数据：[10,52,200,334,390,330,220]
}
]
})
window.onresize=function () {
myChart.resize()
}
})
返回{
}
}
}
效果图：
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。