option = { backgroundColor: '#0c1e55', //背景颜色 title: { text: '大声道', //表头 x: 'center', top: "20", textStyle: { //文字颜色 color: '#ffff', //字体风格 fontStyle: 'normal', //字体粗细 fontWeight: 'bold', //字体系列 fontFamily: 'sans-serif', //字体大小 fontSize: 18 }, }, tooltip: { trigger: 'axis', // transitionDuration: 0, // confine: true, // bordeRadius: 51, borderWidth: 1, //提示框边框的大小 borderColor: '#333', //提示框边框的颜色 backgroundColor: 'rgba(255,255,255,0.9)', //提示框的背景颜色（0.9为透明度） textStyle: { fontSize: 12, //提示框的字体大小 color: '#333', //提示框里的字体颜色 aligin: 'center', }, }, color: ['red', '#12C3C3', '#FBCD14'], //颜色配置 legend: { data: ['叠翠园', '北岳北'], // right:'30',//标签头居右距离 bottom: '70', // top:'20', //标签头居上距离 textStyle: { // color: [ '#','#'], // 标签头提示文字的颜色 color: '#ffff' }, icon: "circle", //icon 长方形 circle 圆形 arrow箭头型 diamond菱形 // triangle三角形 emptyDiamond 空心菱形 //emptyCircle 空心圆型 emptyRectangle 空心长方形 emptyTriangle 空心三角形 }, dataZoom: [{ type: 'slider', realtime: true, //拖拉 handleSize: '100%', //滑动条两侧的大小 start: 0, //开始位置 end: 50, //结束位置 bottom: 25, //居下的距离 textStyle: { color: '#1bb4f6' // 滑动条的文字颜色 }, }], grid: { left: '3%', //整个曲线居左的距离 right: '4%', //整个曲线居右左的距离 bottom: '20%', //整个曲线居下左的距离 height: '70%', //整个曲线的高 containLabel: true }, toolbox: { show: true, feature: { // dataZoom: {}, dataView: { readOnly: true }, magicType: { type: ['line', 'bar', 'pie'] }, restore: {}, textStyle: { color: '#1bb4f6', // 左上角切换的颜色 }, // saveAsImage: {} } }, optionToContent: function(opt) { let axisData = opt.xAxis[0].data; //坐标数据 let series = opt.series; //折线图数据 let tdHeads = '时间'; //表头 let tdBodys = ''; //数据 series.forEach(function(item) { //组装表头 tdHeads += `${item.name}`; }); let table = `${tdHeads} `; for (let i = 0, l = axisData.length; i < l; i++) { for (let j = 0; j < series.length; j++) { //组装表数据 tdBodys += ``; } table += `${tdBodys}`; tdBodys = ''; } table += '

${ series[j].data[i]}

${axisData[i]}

'; return table; }, xAxis: { type: 'category', boundaryGap: false, data: ['10月1日', '10月2日', '10月3日', '10月4日', '10月5日', '10月6日', '10月7日'], axisLine: { lineStyle: { color: '#BA55D3', //设置X轴的颜色 width: 1.5, //设置X轴的粗细 } }, axisLabel: { show: true, textStyle: { color: '#00FF00' //Y轴的数据字体颜色 }, }, }, yAxis: [{ name: "亿元", //左侧单位 nameTextStyle: { color: "#ebf8ac" //左侧单位文字 }, type: 'value', axisLine: { lineStyle: { color: '#FFFF', //设置Y轴的颜色 width: 1.5, //设置Y轴的粗细 } }, axisLabel: { show: true, //formatter: "{value} %", //左侧单位添加后缀 textStyle: { color: '#00FF00' //Y轴的数据字体颜色 }, }, splitLine: { show: true, lineStyle: { color: '#FFC125' //网格线的颜色 } } }, { type: "value", name: "同比", nameTextStyle: { color: "red" }, position: "right", splitLine: { show: false }, axisTick: { show: false }, axisLine: { lineStyle: { color: 'red', //设置Y轴的颜色 width: 1.5, //设置Y轴的粗细 } }, axisLabel: { show: true, formatter: "{value} %", //右侧Y轴文字显示 textStyle: { color: "red" } } }, ], series: [{ name: '叠翠园', type: 'line', smooth: true, //圆滑的曲线 data: [180, 92, 81, 174, 210, 280, 210], symbolSize: 1, // color: '#BA55D3', yAxisIndex: 1, //下标以右侧同比数据参考 lineStyle: { width: 5 //改变线条的粗细 }, label: { show: true, //是否显示 // position: 'top', //位置 // distance: 15, //高度 // color: '#DB5E6A', //颜色 // fontWeight: 'bolder', //加粗 // fontSize: 20, //字体大小 }, }, { name: '北岳北', type: 'line', smooth: true, data: [340, 382, 391, 334, 390, 390, 410], // symbolSize: 1, // label: { // show: true, //是否显示 // position: 'top', //位置 // distance: 15, //高度 // // color: '#DB5E6A', //颜色 // fontWeight: 'bolder', //加粗 // // fontSize: 20, //字体大小 // }, } ] };

Echarts在线免费图表