小知识，大挑战！本文正在参与“程序员必备小知识”创作活动
本文已参与 “掘力星计划” ，赢取创作大礼包，挑战创作激励金。
echarts实现折线图和散点图
首页我们要在vue中引入相关的dom代码：
<IEcharts style="width: 850px; height: 320px;" :option="partialOptions2" ref="partialEchart"></IEcharts>
其次我们需要引入所用的插件：
import 'echarts/lib/component/dataZoom';
import 'echarts/lib/chart/line';
import 'echarts/lib/component/tooltip';
下面就是我们开始画我们所实现的的效果图，首页我们定义xAxis和yAxis，这样一个坐标系就形成了，然后我们通过在xAxis中设置type和axisLabel来设置类型和间隔，这个axisLabel的数字是对data中的数据进行划分，例如我们设置data为[0,...,360]这样一个0到360的数组,如果axisLabel我们设置为59，那么只会显示[0, 60, 120, 180, 240, 300, 360]就如图所示的x轴，同理y轴也可以这样设置。
type: 'category',
data: [0,...,360], //此处省略了0-360中间的数
axisLabel:{
interval:59
}
我们也可以用另一种方式,type设置为value，min设置最小值，max设置最大值，interval设置间隔为20，效果如图的y轴所示。
type: 'value',
min: -20,
max: 60,
interval: 20,
图中红色的线，我们可以设置markLine。
partialOptions2: {
title: {
},
// 悬浮提示
tooltip: {
show: true,
trigger: 'axis',
backgroundColor: '#fff',
textStyle: { color: '#4B9BFB' },
extraCssText: 'box-shadow: 0px 2px 5px 0px rgba(50,107,174,0.19);'
},
xAxis: {
// name: '1/50mm/s',
type: 'category',
// type: 'value',
data: [],
itemStyle: {
show: false
},
axisTick: {
show: false,
alignWithLabel: true
},
// 让起点从x轴0开始，左侧不留白
boundaryGap: false,
// min:0,
// max: 360,
// interval: 60
axisLabel:{
// minInterval: 0,
// maxInterval: 360,
interval:59
}
},
yAxis: {
type: 'value',
// name: '单位：dBmV',
min: -20,
max: 60,
interval: 20,
axisLine: {
show:true,
},
// 给y轴添加单位
// axisLabel:{formatter:'{value}mm/s'}
},
series: [{
// name: '数据',
showSymbol: true,//是否默认展示圆点
symbol: 'circle', //设定为实心点
data: [[0,20], [100,58], [200, 0],[260, -20], [360, 20]],
// data: [0, 20, 58, -20, 20],
color: "#49d86b",
symbolSize: 1,
type: 'line',
smooth: true,
// 设置折线图的颜色
normal: {
color: "#49d86b", //改变折线点的颜色
},
// lineStyle: {
// width: 1,
// color: 'red',
// },
// type: 'line',
},
{
// name: '数据',
showSymbol: true,//是否默认展示圆点
symbol: 'circle', //设定为实心点
symbolSize: 2,
data: [],
color: "#3dcbdb",
// symbolSize: 6,
type: 'scatter',
// 设置折线图的颜色
// normal: {
// color: "#1F824E", //改变折线点的颜色
// },
// lineStyle: {
// width: 1,
// color: 'red',
// },
// type: 'line',
},
// y轴设置的直线
{
type: "line", //如果将 markLine 单独写在一个对象里，就必须加 type ，不然报错。
markLine: {
symbol: "none", //相当于["none", "none"] [虚线，没有箭头]
data: [{
yAxis: 0, //控制y轴横线的值
silent: true, // true 不响应鼠标事件
}],
label:{
// position:"end", //将警示值放在哪个位置，三个值“start”,"middle","end" 开始 中点 结束
// fontSize: 14,
// formatter: function () {
// return "17"
// }
// formatter: "0"
},
lineStyle: {
color: "#ec3d35",
width: 2,
type: "solid", //实线，不写默认虚线
},
}
}],
dataZoom: [
{
show: true,
realtime: true,
start: 0,
// end: 5,
end: 100,
height: 8, //组件高度
left: 30, //左边的距离
right: 30, //右边的距离
bottom: 0, //右边的距离
handleColor: '#D3DCFD', //h滑动图标的颜色
handleStyle: {n
borderColor: '#D3DCFD',
borderWidth: '1',
shadowBlur: 2,
background: '#D3DCFD',
shadowColor: '#D3DCFD',
},
backgroundColor: '#f4f7f9', //两边未选中的滑动条区域的颜色
showDataShadow: false, //是否显示数据阴影 默认auto
showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
// xAxisIndex: [0]
},
{
type: 'inside',
realtime: true,
start: 0,
end: 5,
},
],
itemStyle : { normal: {label : {show: true}}
},
如果想要放缩效果，我们可以设置dataZoom，散点图的属性scatter，如果我们想要x轴和y轴数据对象，我们可以配置[[0,20], [100,58], [200, 0],[260, -20], [360, 20]],这样就可以了。
实现效果：
