echarts 中如何添加左右滚动条 数据如何进行堆叠如何配置那些数据使用那个数据轴
左右滚动条的效果
此项的具体配置可参考 https://echarts.apache.org/zh/option.html#dataZoom-inside.moveOnMouseWheel
dataZoom: [{
id: 'dataZoomX',
type: 'inside',
// start: 0,
// end: this.xAxis.length > 5 ? 10 : 100,
startValue: this.xAxis.length > 5 ? 5 : 0,//数据窗口范围的起始数值(绝对数值)。如果设置了dataZoom-inside.start 则startValue失效。具体可以参考echarte中的配置项
endValue: this.xAxis.length > 5 ? 9 : 100,
zoomOnMouseWheel: false,//表示不按任何功能键，鼠标滚轮能触发缩放
moveOnMouseMove: true,//表示不按任何功能键，鼠标移动能触发数据窗口平移
moveOnMouseWheel: true//表示不按任何功能键，鼠标移动能触发数据窗口平移。
}],
数据堆叠效果
{
name: '累计收入',
type: 'bar',
// 数据堆叠
stack: 'total',
// 柱形图宽度
barMaxWidth:8,
// barGap:"50%",
itemStyle:{
color: '#FF7F50'
},
data:this.dataItem.accumulatedIncome
},
svg生成lengend图标
legend: {
top: 14,
// right:3,
itemHeight:10,
itemWidth:12,
textStyle:{
fontSize:14,
color:"#000"
},
data: [
{name:"累计收入",icon:"path://m 0 -1 h 10 v 10 h -10z"},
{name:"预计收入",icon:"path://m 0 -1 h 10 v 10 h -10z"},
{name:"累计实际收入",icon:"path://m 0 -1 h 10 v 2 h -12z"},
{name:"累计预计收入",icon:"path://m 0 -1 h 10 v 2 h -12z"}
]
},
demo代码
<!-- eslint-disable eqeqeq -->
<!-- eslint-disable no-undef -->
<template>
<div>
<div ref='demo5' style="width:800px;height: 600px;"></div>
</div>
</template>
<script>
import * as echarts from "echarts";
export default {
data() {
return {
xAxis:['周一','周二','周三','周四','周五','周六','周日'],//横坐标
dataItem:{
accumulatedEstimate:[74, 19, 152, 101, 77, 99, 38],//累计预计收入
accumulatedActual:[95, 110, 82, 181, 86, 98, 139],//累计实际收入
expectedRevenue:[177, 68, 134, 202, 24, 184, 194],// 预计收入
accumulatedIncome:[218, 39, 159, 49, 186, 80, 204],// 累计收入
}
}
},
async mounted() {
this.initChart()
},
methods: {
initChart() {
let myChart = echarts.init(this.$refs.demo5);
let option = {
title:{
show:false
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
// 格式化弹窗中的内容
formatter:(params)=>{
let dateTime = params[0].axisValue
// 生成
let element = params.map(item => {
let width = '10px'
let height = '2px'
if (['累计收入','预计收入'].includes(item.seriesName)) {
width = '10px'
height = '10px'
}
return `
${width};height: ${height};background-color: ${item.color};margin-right: 8px;">
${item.seriesName}
${item.value}
`
}).join("");
// 渲染
return `
${dateTime}
${element}
`
},
confine: true
},
legend: {
top: 14,
// right:3,
itemHeight:10,
itemWidth:12,
textStyle:{
fontSize:14,
color:"#000"
},
data: [
{name:"累计收入",icon:"path://m 0 -1 h 10 v 10 h -10z"},
{name:"预计收入",icon:"path://m 0 -1 h 10 v 10 h -10z"},
{name:"累计实际收入",icon:"path://m 0 -1 h 10 v 2 h -12z"},
{name:"累计预计收入",icon:"path://m 0 -1 h 10 v 2 h -12z"}
]
},
grid: {
left: '3%',
right: '3%',
bottom: '2%',
containLabel: true
},
// dataZoom: [{
// id: 'dataZoomX',
// type: 'inside',
// // start: 0,
// // end: this.xAxis.length > 5 ? 10 : 100,
// startValue: this.xAxis.length > 5 ? 5 : 0,//数据窗口范围的起始数值(绝对数值)。如果设置了dataZoom-inside.start 则startValue失效。
// endValue: this.xAxis.length > 5 ? 9 : 100,
// zoomOnMouseWheel: false,
// moveOnMouseMove: true,
// moveOnMouseWheel: true
// }],
xAxis: [
{
type: 'category',
splitLine:{
show:false,
},
axisTick:{
show:false,
},
axisLine:{
show:false,
},
axisPointer: {
type: 'shadow'
},
nameTextStyle:{
color: 'rgba(0,0,0,0.6)',
fontWeight: 400,
fontSize: 12
},
axisLabel:{
color: 'rgba(0,0,0,0.6)',
fontWeight: 400,
fontSize: 12
},
data:this.xAxis
}
],
yAxis: [
{
name: "单位(万元)",
type: 'value',
min: 0,
// max: 200000,
// interval: 40000,
axisPointer:{
show:false,
},
// y轴名字的配置项
nameTextStyle:{
align:'left',
padding: [0,0,0,-25],
color: 'rgba(0,0,0,0.6)',
fontWeight: 400,
fontSize: 12
},
nameGap: 15,
splitLine :{
lineStyle:{
type:'solid',//虚线
color: 'rgba(0,0,0,0.15)',
width: 1,
},
show: true //隐藏
}
},
{
type: 'value',
name: "累计(万元)",
min: 0,
// max: 100,
// interval: 20,
axisLabel: {
formatter: '{value}'
},
splitLine:{
show:false,
},
axisPointer:{
show:false,
},
// y轴名字的配置项
nameTextStyle:{
align:'right',
padding: [0,-25,0,0],
color: 'rgba(0,0,0,0.6)',
fontWeight: 400,
fontSize: 12
},
nameGap: 15,
}
],
series: (()=>{
let series = [
{
name: '累计收入',
type: 'bar',
// 数据堆叠
stack: 'total',
// 柱形图宽度
barMaxWidth:20,
// barGap:"50%",
itemStyle:{
color: '#FF7F50'
},
data:this.dataItem.accumulatedIncome
},
{
name: '预计收入',
type: 'bar',
// 数据堆叠
stack: 'total',
// 柱形图宽度
barMaxWidth:20,
// barGap:"50%",
itemStyle:{
color: '#FFE4B5'
},
data:this.dataItem.expectedRevenue
},
{
name: '累计实际收入',
type: 'line',
smooth: true, // 平滑曲线
// stack: 'total',
// barMaxWidth:8,
// barGap:"50%",
itemStyle:{
color: '#800080',
width: 2
},
// 使用双y轴的时候那些数据使用那个轴
yAxisIndex: 1,
data:this.dataItem.accumulatedActual
},
{
name: '累计预计收入',
type: 'line',
smooth: true, // 平滑曲线
// stack: 'total',
// barMaxWidth:8,
// barGap:"50%",
itemStyle:{
color:'#A0522D',
width: 2
},
yAxisIndex: 1,
data:this.dataItem.accumulatedEstimate
},
]
return series
})()
}
myChart.setOption(option, true);
},
},
}
</script>
<style lang="scss" scoped>
</style>
效果如下
