vue echart折线图,vue echarts封装
这篇文章主要为大家详细介绍了VUE项目中封装统计图折线图的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了VUE项目中封装统计图折线图的具体代码，供大家参考，具体内容如下
封装统计图折线图，可显示多条折线
1.首先在项目中全局引入Echarts，main.js中：
从“电子海图”导入*作为展示
Vue.prototype.$echarts=echarts
2 .组件中新建组件基线图表。vue，以下代码直接复制：
模板
差异
id=baseLineChart
ref=baseLineChart
:style={ width: chartWidth，height: chartHeight }
/
/模板
脚本
导出默认值{
道具：{
图表数据：{
类型：数组，
默认值：()=[]
},
天美时：{
类型：数组，
默认值：()=[]
},
图表名称：{
类型：字符串，
默认值：""
},
图表宽度：{
类型：字符串，
默认值：""
},
图表高度：{
类型：字符串，
默认值：""
},
系列名称：{
类型：数组，
默认值：()=[]
},
图表单位：{
类型：字符串，
默认值：""
}
},
data() {
返回{
基线图表：空，
新图表数据：{}
}
},
计算值：{
chartOptions() {
常量选项={
网格：{
左："4%",
底部："8%",
顶部："15%",
右："0"
},
工具提示：{
触发器："轴"
},
颜色：[#1879BD ， #03B8DF ， #7B879A]，
图例：{
秀：真的，
右："0",
顶部："-1%",
图标："圆形"
},
xAxis: [
{
类型："类别",
轴棒：{ show: false }，
数据：[]
}
],
亚西斯：[
{
类型："值",
名称： ,
nameTextStyle: {
填充：[0,15,0,0]
}
}
],
系列：[]
}
退货选项
}
},
观察：{
图表数据：{
处理程序（新值，旧值){
this.newChartData=newValue
this.initData()
},
深：真的
}
},
已安装(){
这个. nextTick(()={
this.initChart()
if (this.chartData) {
this.initData()
}
})
},
方法：{
initChart() {
const _this=这个
_this.baseLineChart=_this .$echarts.init(this .$refs.baseLineChart)
窗户。addevent侦听器( resize ，function () {
_this.baseLineChart.resize()
})
},
initData() {
让sData=[]
if (this.chartData) {
sData=this.chartData.map((val，index)={
返回{
数据：瓦尔，
名称：this.seriesName[index]，
类型："行"
}
})
this.chartOptions.series=sData
}
this.chartOptions.xAxis[0].data=this.timeX
this.chartOptions.yAxis[0].名称=单位(${this.chartUnit})`
这个。基线图表。setoption(这个。图表选项，true)
}
}
}
/脚本
配置项根据自身项目来定制。
3、在组件中引入：
模板
差异
基线
：图表数据=图表数据
:time-x=timeX
chart-name=OEE
图表宽度= 1700像素
图表高度= 350像素
:series-name=seriesName
图表单位=%
/
/div
/模板
从" @/组件/图表/基线图表。vue "导入基线
脚本
导出默认值{
组件：{
基线
},
data() {
返回{
timeX: []，
图表数据：[]
系列名称：[白班, 晚班]
}
},
}
/脚本
图表宽度图表宽度
图表高度图表高度
图表单位图表数据的显示单位
天美时手表为X轴数据，一般为时间数组[1-1,1-2,1-3 ];
图表数据为折线数据，多条数据格式[ [1,2,3],[4,5,6] ]
系列名称为每条折线对应名称
同理可封装其他图表
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。