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>

代码结果:

相关推荐
凉冰不加冰4 分钟前
Spring Boot自动配置原理深度解析
java·spring boot·后端
黄雪超25 分钟前
Kafka——消费者组消费进度监控都怎么实现?
大数据·分布式·kafka
月亮不月亮43 分钟前
月亮商场购物打折Java
java·eclipse
guozhetao1 小时前
【ST表、倍增】P7167 [eJOI 2020] Fountain (Day1)
java·c++·python·算法·leetcode·深度优先·图论
技术思考者1 小时前
基础很薄弱如何规划考研
java·经验分享·考研
●VON1 小时前
重生之我在暑假学习微服务第二天《MybatisPlus-下篇》
java·学习·微服务·架构·mybatis-plus
老华带你飞1 小时前
口腔助手|口腔挂号预约小程序|基于微信小程序的口腔门诊预约系统的设计与实现(源码+数据库+文档)
java·数据库·微信小程序·小程序·论文·毕设·口腔小程序
hqxstudying1 小时前
J2EE模式---服务层模式
java·数据库·后端·spring·oracle·java-ee
GM_8282 小时前
【最新最完整】SpringAI-1.0.0开发MCP Server,搭建MCP Client 实战笔记(进阶+详细+完整代码)
java·后端·ai编程·springai·mcp
都叫我大帅哥2 小时前
Java DelayQueue:时间管理大师的终极武器
java