图
自适应屏幕
/*** 自适应*/window.addEventListener("resize",function () {myChart.resize(option)});
主题颜色
var myChart =echarts.init(document.getElementById("main"),'dark'); //dark 深色还是浅色 默认浅色
自动缩放选框
自动选中
注意 echarts版本要选对 不然不生效
toolbox: {left: 'right', //放到右边itemGap:20, //icon间隔feature: {dataZoom: {//缩放工具 注意 echarts版本要选对 不然不生效show : true, //是否展示yAxisIndex: 'none',iconStyle:{// opacity:0, //设置icon为透明normal:{textPosition:"left" //位置// color:"#fff",// color:'white',//设置颜色}}},restore: {}, //还原saveAsImage: {} //保存图片}},
如果想要自动缩放区域（不用手动点） 执行完加上
myChart.one(‘finished’,function () {
//区域缩放 自动
myChart.dispatchAction({
type: “takeGlobalCursor”,
key: ‘dataZoomSelect’,
dataZoomSelectActive: true
});
console.log(“完成”)
})
多图展示
注意：xxxIndex要一一对应 表示第几个图
（ 如果你各个图没什么关联性 建议动态添加div,即一个图添加一个实例 ）
legend: [{top:'10%',data:['数据1'],right:'20'},{top:'65%',gridIndex: 1,right:'20',data:['数据2']}],xAxis: [{data: dateList}, {data: dateList,gridIndex: 1}],yAxis: [{splitLine: {show: false}}, {splitLine: {show: false},gridIndex: 1}],grid: [{bottom: '60%'}, {top: '60%'}],series: [{type: 'line',showSymbol: false,name:"数据1",data: valueList}, {type: 'line',showSymbol: false,data: valueList,name:"数据2",xAxisIndex: 1,yAxisIndex: 1}]
自定义tooltip
如果想要自定义别的啥 去官网文档配置项里面找到对应的formatter查看，大同小异
tooltip: {trigger: 'axis',formatter(params){var res = params[0].name;console.log(res)console.log(params)for (var i = 0; i < params.length; i++) {// console.log(params[i]);var datas = params[i].data || "--";if(datas!=="--") datas = parseFloat(params[i].data.toFixed(2));if (datas >= 1000 && datas < 1000000) {datas = parseFloat((datas / 1000).toFixed(2)) +"k";}else if(datas >= 1000000){datas = parseFloat((datas / 1000000).toFixed(2))+"Mil";}//console.log(datas);res += "<br>"+params[i].marker+params[i].seriesName+"：$"+datas;}return res;},},
完整代码
<!DOCTYPE html><html lang="zh-cn"><head><meta charset="UTF-8"><title>Title</title></head><body style="margin:0;padding: 0"><div id="main" style="width: 100vw; height: 100vh;margin:auto;"> </div></body></html><script src="jquery-3.3.1.min.js"></script><!--<script src="echarts.min.js"></script>--><script src="echarts-4.7.0.js"></script><script>var myChart =echarts.init(document.getElementById("main"),'dark'); //dark 深色还是浅色 默认浅色/*** 自适应*/window.addEventListener("resize",function () {myChart.resize(option)});data = [["2000-06-05",116],["2000-06-06",129],["2000-06-07",135],["2000-06-08",86],["2000-06-09",73],["2000-06-10",85],["2000-06-11",73],["2000-06-12",68],["2000-06-13",92],["2000-06-14",130],["2000-06-15",245],["2000-06-16",139],["2000-06-17",115],["2000-06-18",111],["2000-06-19",309],["2000-06-20",206],["2000-06-21",137],["2000-06-22",128],["2000-06-23",85],["2000-06-24",94],["2000-06-25",71],["2000-06-26",106],["2000-06-27",84],["2000-06-28",93],["2000-06-29",85],["2000-06-30",73],["2000-07-01",83],["2000-07-02",125],["2000-07-03",107],["2000-07-04",82],["2000-07-05",44],["2000-07-06",72],["2000-07-07",106],["2000-07-08",107],["2000-07-09",66],["2000-07-10",91],["2000-07-11",92],["2000-07-12",113],["2000-07-13",107],["2000-07-14",131],["2000-07-15",111],["2000-07-16",64],["2000-07-17",69],["2000-07-18",88],["2000-07-19",77],["2000-07-20",83],["2000-07-21",111],["2000-07-22",57],["2000-07-23",55],["2000-07-24",60]];var legArr = [];var dateList = data.map(function (item) {legArr.push({name:item[0]})return item[0];});var valueList = data.map(function (item) {return item[1];});console.log(dateList)console.log(valueList)console.log(legArr)option = {title: [{left: 'center',text: 'Gradient along the y axis'}, {top: '55%',left: 'center',text: 'Gradient along the x axis'}],tooltip: {trigger: 'axis',formatter(params){var res = params[0].name;console.log(res)console.log(params)for (var i = 0; i < params.length; i++) {// console.log(params[i]);var datas = params[i].data || "--";if(datas!=="--") datas = parseFloat(params[i].data.toFixed(2));if (datas >= 1000 && datas < 1000000) {datas = parseFloat((datas / 1000).toFixed(2)) +"k";}else if(datas >= 1000000){datas = parseFloat((datas / 1000000).toFixed(2))+"Mil";}//console.log(datas);res += "<br>"+params[i].marker+params[i].seriesName+"：$"+datas;}return res;},},dataZoom: [ {type: 'inside'}],toolbox: {left: 'right', //放到右边itemGap:20, //icon间隔feature: {dataZoom: {//缩放工具 注意 echarts版本要选对 不然不生效show : true, //是否展示yAxisIndex: 'none',iconStyle:{// opacity:0, //设置icon为透明normal:{textPosition:"left" //位置// color:"#fff",// color:'white',//设置颜色}}},restore: {}, //还原saveAsImage: {} //保存图片}},legend: [{top:'10%',data:['数据1'],right:'20'},{top:'65%',gridIndex: 1,right:'20',data:['数据2']}],xAxis: [{data: dateList}, {data: dateList,gridIndex: 1}],yAxis: [{splitLine: {show: false}}, {splitLine: {show: false},gridIndex: 1}],grid: [{bottom: '60%'}, {top: '60%'}],series: [{type: 'line',showSymbol: false,name:"数据1",data: valueList}, {type: 'line',showSymbol: false,data: valueList,name:"数据2",xAxisIndex: 1,yAxisIndex: 1}]};myChart.setOption(option);myChart.one('finished',function () {// myChart.on('rendered',function () {//区域缩放 自动myChart.dispatchAction({type: "takeGlobalCursor",key: 'dataZoomSelect',dataZoomSelectActive: true});//自适应myChart.resize();console.log("完成")})</script>
