图
自适应屏幕
/**
* 自适应
*/
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>