import * as echarts from 'echarts';
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
option = {
tooltip: { ||提示框
trigger: 'axis', ||轴触发,axis鼠标hover到一条柱状图显示全部数据,item则鼠标hover到折线点显示相应数据
axisPointer: { ||坐标轴指示器,坐标轴触发有效
type: 'cross', ||默认为line,line直线,cross十字准星,shadow阴影
crossStyle: { ||为 'cross' 时有效。
color: '#999' ||线的颜色
}
}
},
toolbox: { ||工具栏
feature: { ||工具配置项
dataView: { show: true, readOnly: false }, ||数据视图工具
magicType: { show: true, type: ['line', 'bar'] }, ||动态类型切换工具
restore: { show: true }, ||配置项还原工具
saveAsImage: { show: true } ||保存图片工具
}
},
legend: { ||图例
data: ['tuli1', 'tuli2', 'tuli3', 'tuli4']
},
xAxis: [
{
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisPointer: { ||设置X轴上的指示器
type: 'shadow' ||'shadow' 阴影指示器 'none' 无指示器 'line' 直线指示器
}
}
],
yAxis: [
{ ||第一条Y轴,索引为0
type: 'value',
name: '深度', ||坐标轴名称
min: 0, ||坐标轴刻度最小值
max: 250, ||度最大值
interval: 50, ||强制设置坐标轴分割间隔
axisLabel: { ||坐标轴刻度标签的相关设置
formatter: '{value} ml' ||刻度标签的内容格式器,支持字符串模板和回调函数
}
},
{ ||第二条Y轴 索引为1
type: 'value',
name: '温度',
min: 0,
max: 25,
interval: 5,
axisLabel: {
formatter: '{value} °C'
}
}
],
series: [
{
name: 'tuli1',
type: 'bar',
data: [
2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
]
},
{
name: 'tuli2',
type: 'bar',
data: [
2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 90.7, 18.8, 6.0, 2.3
]
},
{
name: 'tuli3',
type: 'bar',
data: [2.6, 0, 9.0, 90.7, 70.7, 0, 190.2, 48.7, 0, 6.0, 2.3]
},
{
name: 'tuli4',
type: 'line',
yAxisIndex: 1, ||因为有2条Y轴,这个属性可以让这条数据以索引1的Y轴为准yAxis:[{},{这个}]。默认值是0
data: [2.0, 2.2, 3.3, 10.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
}
]
};
option && myChart.setOption(option);
这样的