多Y轴
多Y轴案例
蓝色的线，对应左Y轴。绿色的线，对应右Y轴
代码示例
barTwoYChart () { let newPromise = new Promise((resolve) => { resolve() }) newPromise.then(() => { // echart 初始化 const chartBox = this.$echarts.init(document.getElementById("two-y")); const option = { // 标题 title: { text: '2018年管线数据利用统计', textStyle: { //主标题内容样式 color: '#111' }, }, // x轴 xAxis: { type: 'category', //x轴类型，默认'category' //坐标轴 轴线 axisLine: { show: true, // 轴线样式 lineStyle: { color: '#111', width: 1, type: 'solid', }, }, //坐标轴 刻度 axisTick: { show: true, }, //坐标轴 标签 axisLabel: { show: true, margin: 10, //刻度标签与轴线之间的距离 }, data: ["01", "01", "01", "01", "01", "01", "01", "01", "01", "01", "01", "01"],//内容 }, // Y轴，默认为 yAxis:{} // 如果为多个Y轴，变为 [{},{}] yAxis: [ { name: '管线查询次数（次）', // y轴名称 nameLocation: 'center', // y轴名称相对位置 nameTextStyle: { // 坐标轴名称样式 color: '#111', }, nameGap: 40, //坐标轴名称与轴线之间的距离 type: 'value', // y轴类型，默认'value' axisLine: { //坐标轴 轴线 show: true, //是否显示 lineStyle: { color: '#111', width: 1, }, }, axisTick: { //坐标轴 刻度 show: true, //是否显示 }, axisLabel: { //坐标轴 标签 show: true, //是否显示 inside: false, //是否朝内 rotate: 0, //旋转角度 margin: 10, //刻度标签与轴线之间的距离 }, splitLine: { //grid 区域中的分隔线 show: true, lineStyle: { color: '#ccc', width: 1, }, }, }, { name: '在线调用次数（次）', //轴名称 nameLocation: 'center', //轴名称相对位置value nameTextStyle: { //坐标轴名称样式 color: '#111', }, nameGap: 40, //坐标轴名称与轴线之间的距离 type: 'value', // alignTicks: true, // 多个Y轴时 对其刻度线 type: 'value', // inverse: true, //反向Y轴 axisLine: { //坐标轴 轴线 show: true, //是否显示 lineStyle: { color: '#111', width: 1, }, }, axisTick: { //坐标轴 刻度 show: true, //是否显示 }, axisLabel: { //坐标轴 标签 show: true, //是否显示 inside: false, //是否朝内 rotate: 0, //旋转角度 margin: 10, //刻度标签与轴线之间的距离 }, splitLine: { //grid 区域中的分隔线 show: true, lineStyle: { color: '#ccc', width: 1, }, }, } ], series: [ { type: 'line', lineStyle: { width: 2 }, smooth: true, // 是否曲线 data: [36, 15, 8, 12, 11, 6, 3, 0, 0, 0, 0, 0], label: { normal: { show: true, position: 'top', //数值位置 distance: 10, // 数值的距离 fontSize: 14, formatter: function (params) { return params.value; } } }, }, { type: 'line', yAxisIndex: 1, lineStyle: { width: 2 }, smooth: true, // prettier-ignore data: [16, 16, 6, 5, 4, 4, 3, 0, 0, 0, 0, 0], label: { normal: { show: true, position: 'top', distance: 10, // 数值的距离 fontSize: 14, formatter: function (params) { return params.value; } } }, } ] }; chartBox.setOption(option); window.addEventListener("resize", function () { chartBox.resize(); }); }) },
特殊配置项
yAxis
-
当只需要一个Y轴时，Y轴定义为
yAxis: {} -
当需要多个Y轴时，
yAxis: [{},{}] -
alignTicks用来定义两个Y轴是否对其，默认为false不对其-
两者区别为：
-
false为不对其
-
true为对其刻度线
-
-
inverse用来定义是否把Y轴倒过来，默认为false-
区别：
-
false不反向
-
true为反向
-
series
- series用来定义数据，每一个{}，为一条数据
smooth用来定义是否为曲线yAxisIndex用来确定这条数据对应哪条Y轴，默认为yAxis: [{},{}]的第0项
多X轴
多X轴和多Y轴，类似
代码示例
barTwoXChart () { let newPromise = new Promise((resolve) => { resolve() }) newPromise.then(() => { const chartBox = this.$echarts.init(document.getElementById("two-x")); const option = { title: { text: '双x轴' }, // x轴的数据 xAxis: [{ type: 'category', data: ['01', '02', '01', '02', '03', '01', '04', '05', '06', '01', '02', '03'], position: 'bottom', offset: 20, axisTick: { length: 55, // 刻度线长度 inside: false, // 刻度线朝上 或朝下，默认为false为朝下 lineStyle: { //刻度线样式 color: '#ff9800' }, interval: function (index, value) { if (value === '01') { return value // 根据x轴里面的数据进行判段，当value为01时，才显示刻度线，否则不显示 } } } }, { position: 'bottom', offset: 70, // 向下偏移，为了不和第一条x轴重合 //x轴 轴线 axisLine: { show: false }, axisLabel: { inside: true, }, data: ['20日', '21日', '22日', '23日'] }], // Y轴，默认为 yAxis:{} // 如果为多个Y轴，变为 [{},{}] yAxis: [ { name: '管线查询次数（次）', // y轴名称 nameLocation: 'center', // y轴名称相对位置 nameTextStyle: { // 坐标轴名称样式 color: '#111', }, nameGap: 40, //坐标轴名称与轴线之间的距离 type: 'value', // y轴类型，默认'value' axisLine: { //坐标轴 轴线 show: true, //是否显示 lineStyle: { color: '#111', width: 1, }, }, axisTick: { //坐标轴 刻度 show: true, //是否显示 }, axisLabel: { //坐标轴 标签 show: true, //是否显示 inside: false, //是否朝内 rotate: 0, //旋转角度 margin: 10, //刻度标签与轴线之间的距离 }, splitLine: { //grid 区域中的分隔线 show: true, lineStyle: { color: '#ccc', width: 1, }, }, }, { name: '在线调用次数（次）', //轴名称 nameLocation: 'center', //轴名称相对位置value nameTextStyle: { //坐标轴名称样式 color: '#111', }, nameGap: 40, //坐标轴名称与轴线之间的距离 type: 'value', alignTicks: false, // 多个Y轴时 对其刻度线 type: 'value', inverse: true, //反向Y轴 axisLine: { //坐标轴 轴线 show: true, //是否显示 lineStyle: { color: '#111', width: 1, }, }, axisTick: { //坐标轴 刻度 show: true, //是否显示 }, axisLabel: { //坐标轴 标签 show: true, //是否显示 inside: false, //是否朝内 rotate: 0, //旋转角度 margin: 10, //刻度标签与轴线之间的距离 }, splitLine: { //grid 区域中的分隔线 show: true, lineStyle: { color: '#ccc', width: 1, }, }, } ], series: [ { type: 'line', lineStyle: { width: 2 }, smooth: true, // prettier-ignore data: [36, 15, 8, 12, 11, 6, 3, 0, 0, 0, 0, 0], label: { normal: { show: true, position: 'top', distance: 10, // 数值的距离 fontSize: 14, formatter: function (params) { return params.value; } } }, }, { type: 'line', yAxisIndex: 1, lineStyle: { width: 2 }, smooth: true, // prettier-ignore data: [16, 16, 6, 5, 4, 4, 3, 0, 0, 0, 0, 0], label: { normal: { show: true, position: 'top', distance: 10, // 数值的距离 fontSize: 14, formatter: function (params) { return params.value; } } }, } ] }; chartBox.setOption(option); window.addEventListener("resize", function () { chartBox.resize(); }); }) }
特殊配置项
xAxis
-
xAxis和y轴一样- 当一条X轴时 定义为
xAxis:{} - 多个X轴时 定义为
xAxis: [{},{}]
- 当一条X轴时 定义为
-
interval: function (index, value)- index返回的是索引项
- value返回的是该索引项对应data的X轴名字
