highcharts自定义图例形状,vue echarts图表
这篇文章主要为大家详细介绍了某视频剪辑软件高图表实现可选范围的图表，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件高图表实现可选范围的图表，供大家参考，具体内容如下
效果图：
实现方法（数据可自行修改):
div id= container style= width:100%；高度：370像素位置：相对
div id=详细容器 ref=图表1 style=宽度：100%；高度：370像素/
div id=主容器 ref=图表2 style= position:absolute；顶配：270像素高度：100像素宽度：100% /
/div
从高图表//e slint-disable-line导入高图表
从" jquery "中导入$
风险值明细图表//电子清单-禁用-折线图
var主图表//eslint-disable-line
导出默认值{
名称：收集数据图表，
data() {
返回{
detailChartData:[//eslint-disable-line
0.8446, 0.8445, 0.8444, 0.8451, 0.8418, 0.8264, 0.8258, 0.8232, 0.8233, 0.8258,
0.8283, 0.8278, 0.8256, 0.8292, 0.8239, 0.8239, 0.8245, 0.8265, 0.8261, 0.8269,
0.8273, 0.8244, 0.8244, 0.8172, 0.8139, 0.8146, 0.8164, 0.82, 0.8269, 0.8269,
0.8269, 0.8258, 0.8247, 1.8286, 0.8289, 0.8316, 0.832, 0.8333, 0.8352, 0.8357,
0.8355, 0.8354, 0.8403, 0.8403, 0.8406, 0.8403, 0.8396, 0.8418, 0.8409, 0.8384,
0.8386, 0.8372, 0.839, 0.84, 0.8389, 0.84, 0.8423, 0.8423, 0.8435, 0.8422,
0.838, 0.8373, 0.8316, 0.8303, 0.8303, 0.8302, 0.8369, 0.84, 0.8385, 0.84,
0.8401, 0.8402, 0.8381, 0.8351, 0.8314, 0.8273, 0.8213, 0.8207, 0.8207, 0.8215,
0.8242, 0.8273, 0.8301, 0.8346, 0.8312, 0.8312, 0.8312, 0.8306, 0.8327, 0.8282,
0.824, 0.8255, 0.8256, 0.8273, 0.8209, 1.8151, 0.8149, 0.8213, 0.8273, 0.8273, //100
0.8261, 0.8252, 0.824, 0.8262, 0.8258, 0.8261, 0.826, 0.8199, 0.8153, 0.8097,
0.8101, 0.8119, 0.8107, 0.8105, 0.8084, 0.8069, 0.8047, 0.8023, 0.7965, 0.7919,
0.7921, 0.7922, 0.7934, 0.7918, 0.7915, 0.787, 0.7861, 0.7861, 0.7853, 0.7867,
0.7827, 0.7834, 0.7766, 0.7751, 0.7739, 0.7767, 0.7802, 0.7788, 0.7828, 0.7816,
0.7829, 0.783, 0.7829, 0.7781, 0.7811, 0.7831, 0.7826, 0.7855, 0.7855, 0.7845,
0.7798, 0.7777, 0.7822, 0.7785, 0.7744, 0.7743, 0.7726, 0.7766, 0.7806, 0.785,
0.7907, 0.7912, 1.7913, 0.7931, 0.7952, 0.7951, 0.7928, 0.791, 0.7913, 0.7912,
0.7941, 0.7953, 0.7921, 0.7919, 0.7968, 0.7999, 0.7999, 0.7974, 0.7942, 0.796,
0.7969, 0.7862, 0.7821, 0.7821, 0.7821, 0.7811, 0.7833, 0.7849, 0.7819, 0.7809,
0.7809, 0.7827, 0.7848, 0.785, 0.7873, 0.7894, 0.7907, 0.7909, 0.7947, 0.7987, //200
0.799, 0.7927, 0.79, 0.7878, 0.7878, 0.7907, 0.7922, 0.7937, 0.786, 0.787,
0.7838, 0.7838, 0.7837, 0.7836, 0.7806, 0.7825, 0.7798, 0.777, 0.777, 0.7772,
0.7793, 0.7788, 0.7785, 0.7832, 0.7865, 0.7865, 0.7853, 0.7847, 0.7809, 0.778,
0.7799, 0.78, 0.7801, 0.7765, 0.7785, 0.7811, 0.782, 0.7835, 0.7845, 0.7844,
0.782, 0.7811, 0.7795, 0.7794, 0.7806, 0.7794, 0.7794, 0.7778, 0.7793, 0.7808,
0.7824, 0.787, 0.7894, 0.7893, 0.7882, 1.7871, 0.7882, 0.7871, 0.7878, 0.79,
0.7901, 0.7898, 0.7879, 0.7886, 0.7858, 0.7814, 0.7825, 0.7826, 0.7826, 0.786,
0.7878, 0.7868, 0.7883, 0.7893, 0.7892, 0.7876, 0.785, 0.787, 0.7873, 0.7901,
0.7936, 0.7939, 0.7938, 0.7956, 0.7975, 0.7978, 0.7972, 0.7995, 0.7995, 0.7994,
0.7976, 0.7977, 0.796, 0.7922, 0.7928, 0.7929, 0.7948, 0.797, 0.7953, 0.7907 //300
]
}
},
已安装(){
$(窗口)。调整大小(()={
detailChart.reflow()
masterChart.reflow()
})
},
销毁前(){
$(窗口)。关闭("调整大小")
},
方法：{
创建细节(主图表){
var detailData=[]
高图表。每个(主图表。系列[0]).数据，(d，索引)={
如果(d.x 30) {
detailData.push({
x: d.x，
y: d.y，
时间：d时间
})
}
})
详细图表=详细图表。图表(细节容器，{
图表：{
类型：" area "，//areaspline
边缘底部：120,
回流：假，
marginLeft: 50，
右边：20,
风格：{
位置："绝对"
}
},
学分：{
启用：假
},
标题：{
文本：""
},
副标题：{
文本：""
},
xAxis: {
//类型："日期时间"
},
亚西斯：{
gridLineDashStyle: dash ，
标题：{
文本：空
},
最大缩放：0.1
},
工具提示：{
格式化程序：函数(){
var point=this.points[0]
常数日期=新日期（点。点。时间)
const y=date.getFullYear()
设MM=date.getMonth() 1
MM=MM 10？( 0 毫米) :毫米
设d=date.getDate()
d=d 10？( 0 d) : d
设h=date.getHours()
h=h 10？( 0 h) : h
设m=date.getMinutes()
m=m 10？( 0 米) :米
让s=date.getSeconds()
s=s 10？( 0 s) : s
const time=y - MM - d h : m : s
return span time /spanbr/
b 点。系列。名称:点。你好毫米/秒/秒
},
共享：真
},
图例：{
启用：假
},
绘图选项：{
系列：{
阴影：{
颜色： #e1e8fe ，
宽度：6,
小康：3
},
标记：{
启用：真，
半径：3.5,
国家：{
悬停：{
启用：真，
半径：3
}
}
},
fillColor: {//注意！如果是柱状图请使用颜色，如果是面积图请使用填充颜色
线性梯度：{
x1: 0，
y1: 0，
x2: 0，
y2: 1
},
停靠点：[
[0， #f3f6ff]，
[1,高图表。颜色("白色")。设置容量(0).get(rgba)]
]
}
}
},
系列：[{
名称： 总体振动，
动画：假的，
颜色： #225FFB ，
数据：详细数据
}]
})
},
createMaster() {
let detail data=[]//eslint-disable-line
高图表。每个(这个。详细图表数据，(d，index)={
如果(d) {
detailData.push({
x:数字（索引)1,
y:数字(d)，
时间：1639538317248
})
}
})
主图表=高图表。图表(主容器，{
图表：{
类型："样条线",
回流：假，
边框宽度：0,
背景颜色：空
marginLeft: 50，
右边：20,
缩放类型：“x”，
事件：{
//侦听主图表上的选择事件以更新
//详细信息图表的极端情况
选择：功能（事件){
var极端对象=事件。x轴[0]
var最小值=极值对象。部
var最大值=极限对象。最大
var detailData=[]
var xAxis=this.xAxis[0]
Highcharts.each(this.series[0]).数据，(d，索引)={
如果(直接最小值d.x最大值){
detailData.push({
x: d.x，
y: d.y，
时间：d时间
})
}
})
xaxis。removeplotband( mask-before )
xAxis.addPlotBand({
id:"掩码-之前",
出发地：1,
至：分钟，
颜色： rgba(0，0，0，0.1)
})
xaxis。removeplotband( mask-after )
xAxis.addPlotBand({
id:"掩码-之后",
出发地：马克斯，
到：300,
颜色： rgba(0，0，0，0.1)
})
detailChart.series[0].设置数据（详细数据)
返回错误的
}
}
},
标题：{
文本：空
},
xAxis: {
绘图带：[{
id:"掩码-之前",
出发地：30,
到：300,
颜色： rgba(0，0，0，0.1)
}],
标题：{
文本：空
}
},
亚西斯：{
gridLineWidth: 0，
标签:{
启用：假
},
标题：{
文本：空
},
最小值：0.6,
showFirstLabel: false
},
工具提示：{
格式化程序：()={
返回错误的
}
},
图例：{
启用：假
},
学分：{
启用：假
},
绘图选项：{
系列：{
fillColor: {
线性梯度：[0,0,0,70],
停靠点：[
[0， #c3cffe]，
[1， rgba(255，255，255，0)]
]
},
线宽：1,
标记：{
启用：假
},
影子：假的，
国家：{
悬停：{
线宽：1
}
},
enableMouseTracking: false
}
},
系列：[{
类型："面积",
名称："美元兑欧元",
点数间隔：100
pointStart: 1，
动画：假的，
颜色： #225FFB ，
数据：详细数据
}],
导出：{
启用：假
}
},(主图表)={
this.createDetail(主图表)
})
返回主图表
}
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。