ECharts图表图例4

jave

用eclipse软件

代码:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<!-- 引入ECharts脚本 -->

<script src="js/echarts.js"></script>

<title>绘制堆积面积图</title>

</head>

<body>

<div id="main" style="width: 600px; height: 400px"></div>

<script type="text/javascript">

var myChart = echarts. init(document. getElementById("main"));

var option= {

title:{

text:"堆积面积图",

textStyle:{

color:'green',

},

left:20,

top:3

},

tooltip:{

trigger:'axis'

},

legend:{

data:['手机','冰箱','空调','电视','其他'],

left:160,

top:3

},

toolbox:{

show:true,

orient:'vertical',

feature:{

mark:{show:true}

dataView:{show:true,resdOnly:false},

magicType:{show:true,type:['line','bar','stack','tiled']},

restore:{show:true},

saveAsImage:{show:true}

},

top:52,

left:550

},

calculable:true,

xAxis:[

{

type:'category',

boundaryGap:false,

data:['周一','周二','周三','周四','周五','周六','周日']

}

],

yAxis:[

{

type:'value'

}

],

series:[

{

name:'手机',

type:'line',

stack:'总量',

color:'rgb(0,0,0)',

itemStyle:{

normal:

{

}

},

data:[434,345,456,222,333,444,432]

},

{

name:'冰箱',

type:'line',

stack:'总量',

color:'blue',

itemStyle:{

normal:{

}

},

data:[420,282,391,344,390,530,410]

},

{

name:'空调',

type:'line',

stack:'总量',

color:'green',

itemStyle:{

normal:{

}

},

data:[350,332,331,334,390,320,340]

},

{

name:'电视',

type:'line',

stack:'总量',

color:'green',

itemStyle:{

normal:{

}

},

data:[420,222,333,442,230,430,430]

},

{

name:'其他',

type:'line',

stack:'总量',

color:'#FA8072';,

itemStyle:{

normal:{

}

},

data:[330,442,432,555,456,666,877]

}

]

};

myChart.setOption(option);

</script>

</body>

</html>

代码结果:

相关推荐
武子康3 小时前
大数据-98 Spark 从 DStream 到 Structured Streaming:Spark 实时计算的演进
大数据·后端·spark
阿里云大数据AI技术3 小时前
2025云栖大会·大数据AI参会攻略请查收!
大数据·人工智能
卡尔特斯4 小时前
Android Kotlin 项目代理配置【详细步骤(可选)】
android·java·kotlin
白鲸开源4 小时前
Ubuntu 22 下 DolphinScheduler 3.x 伪集群部署实录
java·ubuntu·开源
ytadpole4 小时前
Java 25 新特性 更简洁、更高效、更现代
java·后端
纪莫4 小时前
A公司一面:类加载的过程是怎么样的? 双亲委派的优点和缺点? 产生fullGC的情况有哪些? spring的动态代理有哪些?区别是什么? 如何排查CPU使用率过高?
java·java面试⑧股
JavaGuide5 小时前
JDK 25(长期支持版) 发布,新特性解读!
java·后端
用户3721574261355 小时前
Java 轻松批量替换 Word 文档文字内容
java
白鲸开源5 小时前
教你数分钟内创建并运行一个 DolphinScheduler Workflow!
java
Java中文社群6 小时前
有点意思!Java8后最有用新特性排行榜!
java·后端·面试