vue echart折线图,echarts 多条折线图
本文主要详细介绍了在Echarts中引入Vue实现折线图的方法。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。
本文分享Vue导入Echarts实现折线散点图的具体代码，供大家参考。具体内容如下
效果图：
一、vue-cli中导入echarts
命令：npm安装echarts - save下载到项目中，然后导入到项目中的main.js中，保存在vue的原型上。
main.js代码如下：
从“vue”导入Vue
从导入应用程序。/App.vue
const echarts=require(echarts )
Vue.prototype.$echarts=echarts
Vue.config.productionTip=false
新Vue({
render: h=h(App)，
}).$ mount(“# app”)
此处的echarts导入使用require，从“echarts”导入echarts将失败。具体原因不得而知。
然后在app.vue中编写如下代码：
模板
div id=应用程序
/div
/模板
脚本
导出默认值{
名称：“应用程序”，
已安装(){
this.eachartsInit()
},
方法：{
eachartsInit() {
让我的图表=这个。$ e charts . init(document . getelementbyid( app ))
let option={
图例：{
数据：[target 1 ， fixed type ， target 2 ， target 3] //显示几行，与series数组的元素一一对应。
},
网格：{
Bottom: 20% ，//控制整个图表的下边缘与外部容器之间的距离。
宽度：800，//
身高：500
},
工具提示：{
Trigger: axis ，//将鼠标悬停在折线上以显示X轴数据。
axisPointer: {
键入： cross ，//控件同时显示Y轴数据
标签:{
BackgroundColor: #6a7985 //当鼠标移动到这一点时，将背景色添加到坐标轴的坐标上。
}
}
},
xAxis: {
Type: category ，//可以取时间、值、日志、类别的值。此散点图中使用了类别。
//x轴的坐标值
数据：[2021.10.28 09:17:34 ， 2021.10.28 09:20:35 ， 2021.10.28 09:20:50 ， 2021.10.28 09:21:05 ， 2021.10.28 09:22:34 ， 2021.10.28 09:25:34]，
//这里控制X轴坐标的字体旋转(逆时针)
axisLabel: {
旋转：45，//旋转的角度
Color: red ，//控制x轴坐标的字体颜色。
FontWeight: 600 //控制字体的粗细
}
},
//y轴配置，其中y只需要显示值，type使用值。
亚西斯：{
类型：“值”
},
//
系列：[
//4个数组元素相当于4行
{
数据：[820，750，450，560，650，660]，//每个x坐标对应的值
Type: line ，//显示的类型
Name: Target 1 ，属性//name的值取自图例中的数据数组元素。
平滑：真//要平滑吗？
},
{
数据：[220，450，350，760，680，560]，
类型：“行”，
名称：“目标2”，
平滑：正确
},
{
数据：[352，550，370，560，420，590]，
类型：“行”，
名称：固定类型，
平滑：正确
},
{
数据：[522，345，450，458，592，485]，
类型：“行”，
名称：“目标3”，
平滑：正确
}
]
}
Echarts . setoption(option)//将配置项选项传递给生成的e charts实例。
}
}
}
/脚本
风格
#app{
宽度：850px
高度：600px
}
/风格
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。