完成效果：
第一步：导入echarts
// 1.导入echart
import * as echarts from 'echarts'
第二步：准备容器
<!-- 2.装echarts容器 -->
<div id="div-border" style="width: 400px;height:300px;"></div>
第三步：画表格
mounted: function() {
this.SA10Chart()
}，
methods: {
SA10Chart () {
// 3.基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('div-border'))
// 4.准备数据和配置项
var colors = ['#5470C6', '#91CC75', '#EE6666']; //默认色板
var option = {
color: colors,
//鼠标hover提示框
tooltip: {
trigger: 'axis', //触发类型；轴触发，axis则鼠标hover到一条柱状图显示全部数据，item则鼠标hover到折线点显示相应数据，
axisPointer: {
//坐标轴指示器，坐标轴触发有效，
type: 'line', //默认为line，line直线，cross十字准星，shadow阴影,
},
// 提示框中的内容a是系列名称c是数值
formatter: '<span style="width: 8px;height: 8px;display:inline-block;border-radius: 50%;background-color:#5470C6"></span> {a0}:{c0} m⁄s²<br/><span style="width: 8px;height: 8px;display:inline-block;border-radius: 50%;background-color:#91CC75"></span> {a1}:{c1} m/s<br/><span style="width: 8px;height: 8px;display:inline-block;border-radius: 50%;background-color:#EE6666"></span> {a2}:{c2} um'
},
grid: {
right: '30%',
},
//图例
legend: {
data: ['加速度有效值', '速度有效值', '位移峰峰值'], //注意：图例的名字必须跟下面series数组里面的name一致
itemHeight: 9, //改变圆圈大小
textStyle: {
fontWeight: 'normal',
color: '#fff' // 图例文字颜色
}
},
xAxis: [
{
type: 'category', //轴类型，横轴默认为类目型'category'，纵轴默认为数值型'value'，
// 坐标轴指示器
axisTick: {
type: 'shadow', //在tooltip的cross基础上，增加阴影类型的X轴指示器
alignWithLabel: true
},
data: ['9/1', '9/2', '9/3', '9/4', '9/5', '9/6', '9/7'],
// 坐标轴文字标签
axisLine: {
lineStyle: {
color: '#fff'
},
}
},
],
yAxis: [
{
type: 'value',
name: '加速度有效值',
min: 0,
max: 5,
interval: 1, //Y轴间隔
position: 'right',
axisLine: {
show: true,
lineStyle: {
color: colors[0]
}
},
//坐标轴文字标签
axisLabel: {
formatter: '{value} m⁄s²'
}
},
{
type: 'value',
name: '速度有效值',
min: 0,
max: 5,
position: 'right',
offset: 80,
axisLine: {
show: true,
lineStyle: {
color: colors[1]
}
},
axisLabel: {
formatter: '{value} m/s'
}
},
{
type: 'value',
name: '位移峰峰值',
min: 0,
max: 3,
position: 'left',
axisLine: {
show: true,
lineStyle: {
color: colors[2]
}
},
axisLabel: {
formatter: '{value} um'
}
}
],
series: [
{
barWidth: 8, //柱图宽度
name: '加速度有效值',
type: 'bar', //数据表现形式（bar为柱形图，line为折线图）
data: [2.0, 4.9, 2.0, 3.2, 2.6, 1.7, 1.6]
},
{
barWidth: 8,//柱图宽度
name: '速度有效值',
type: 'bar',
yAxisIndex: 1, //选择index为1的Y轴作为参考系
data: [2.6, 2.9, 3.0, 4.4, 2.7, 0.7, 1.6]
},
{
name: '位移峰峰值',
type: 'line',
yAxisIndex: 2,
data: [2.0, 2.2, 2.3, 2.5, 3.0, 1.2, 2.3],
//线条样式，如折线图
itemStyle: {
normal: {
//柱形图圆角，初始化效果
barBorderRadius: [10, 10, 10, 10],
}
},
}
]
};
// 5.展示数据
myChart.setOption(option)
// 6. 当我们浏览器缩放的时候，图表也等比例缩放
window.addEventListener('resize', function () {
// 让我们的图表调用 resize这个方法
myChart.resize()
})
},