var option = { // backgroundColor:'#fff', // color: colors, //下面这种直接配置演示也行 color: ['#00b0ff', '#029768', '#29CEFF', '#F9993A'], //依次选择颜色，默认为第一个颜色，多根柱子多个颜色 xAxis: { boundaryGap: true, data: ['12月1日', '12月2日', '12月3日', '12月4日', '12月5日', '12月6日', '12月7日', '12月8日', '12月9日', '12月10日', '12月11日', '12月12日', '12月13日', '12月14日', '12月15日', '12月16日', '12月17日', '12月18日', '12月19日', '12月20日', '12月21日', '12月22日', '12月23日', '12月24日', '12月25日', '12月26日', '12月27日', '12月28日', '12月29日', '12月30日', '12月31日',], splitLine: { show: false, lineStyle: { color: "#EFF0F1" } }, axisLine: { show: true, lineStyle: { color: "#155dae" } }, axisTick: { show: false }, axisLabel: { show: true, margin: 20, textStyle: { color: '#87acfa', fontSize: "24", } }, }, legend: { itemWidth: 24, itemHeight: 21, bottom: 15, itemGap: 100, data: [{ name: '货量', textStyle: { color: '#e9f0ff', fontSize: 22, padding: [0, 0, 0, 5] }, itemStyle: { color: '#ffa800', borderColor: '#ffa800' }, }, { name: '货量趋势', textStyle: { color: '#e9f0ff', fontSize: 22 }, itemStyle: { borderColor: '#ffa800' }, lineStyle: { color: '#ffa800' } },], }, tooltip: { trigger: 'axis', type: 'line', backgroundColor: 'transparent', formatter: function (params) { // console.log(params) return `

日期

2022.12.1

高峰

${params[0].data[1]}

吨

低谷

${params[0].data[2]}

吨

平均值

${params[1].value}

吨

` } }, grid: { top: '20%', left: '2%', right: '2%', bottom: '14%', //网格图（柱状图、折线图、气泡图等）离底部的距离，也可以用像素比如10px containLabel: true //grid 区域是否包含坐标轴的刻度标签。false可能溢出，默认为false }, yAxis: { name: '吨', nameTextStyle: { color: '#c3d5f8', fontSize: 22, padding: [0, 70, 0, 0] }, nameGap: 20, axisTick: { show: true }, axisLabel: { show: true, textStyle: { color: '#c3d5f8', fontSize: 22 }, margin: 20, }, // data: ['1000', '2000', '3000', '4000', '5000'], splitLine: { show: true, lineStyle: { type: "dashed", color: "#0b3059" } }, axisLine: { show: true, lineStyle: { color: "#155dae" } }, }, series: [{ name: '货量', type: 'candlestick', barWidth: '20px', itemStyle: { color: '#1fa0e4', color0: '#1fa0e4', borderColor: '#207ae2', borderColor0: '#207ae2', }, data: [ [3738, 2320, 3738, 2320], [3618, 2180, 3618, 2180], [3718, 2220, 3718, 2220], [3538, 2080, 3538, 2080], [3638, 2120, 3638, 2120], [3558, 2090, 3558, 2090], [3598, 2110, 3598, 2110], [3438, 2220, 3438, 2220], [3738, 2120, 3738, 2120], [3638, 2120, 3638, 2120], [3638, 2120, 3638, 2120], [3638, 2120, 3638, 2120], [3738, 2320, 3738, 2320], [3618, 2180, 3618, 2180], [3718, 2220, 3718, 2220], [3538, 2080, 3538, 2080], [3638, 2120, 3638, 2120], [3558, 2090, 3558, 2090], [3598, 2110, 3598, 2110], [3438, 2220, 3438, 2220], [3738, 2120, 3738, 2120], [3738, 2320, 3738, 2320], [3618, 2180, 3618, 2180], [3718, 2220, 3718, 2220], [3538, 2080, 3538, 2080], [3638, 2120, 3638, 2120], [3558, 2090, 3558, 2090], [3598, 2110, 3598, 2110], [3438, 2220, 3438, 2220], [3738, 2120, 3738, 2120], [3638, 2120, 3638, 2120], ] }, { name: '货量趋势', type: 'line', data: [ 3029, 2899, 2969, 2809, 2879, 2824, 2854, 2829, 2929, 2879, 2879, 2879, 3029, 2899, 2969, 2809, 2879, 2824, 2854, 2829, 2929, 3029, 2899, 2969, 2809, 2879, 2824, 2854, 2829, 2929, 2879, ], symbol: 'circle', symbolSize: 10, lineStyle: { color: '#ffa800', width: 2, }, itemStyle: { normal: { color: '#ffa800',//拐点颜色 borderColor: '#ffa800',//拐点边框颜色 borderWidth: 2//拐点边框大小 }, emphasis: { //突出效果配置(鼠标置于拐点上时) borderColor: '#ffa800', // 拐点边框颜色 borderWidth: 2, // 拐点边框宽度 shadowColor: '#ffa800', // 阴影颜色 shadowBlur: 2, // 阴影渐变范围控制 color: '#000'//hover拐点颜色定义 }, }, smooth: false, areaStyle: { color: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [ { offset: 0, color: '#ffa800', // color: 'rgba(137,32,200, 0.4)', }, { offset: 0.5, color: 'rgba(0,0,0,0)', // color: 'rgba(137,32,200, 0.4)', }, { offset: 1, // color: 'rgba(137,32,200, 0)', color: 'rgba(0,0,0,0)', }, ]), }, z: 10 }, ] }

柱状折线