蛛网图echarts.js

最新推荐文章于 2024-04-01 15:09:16 发布

垃坤小子

最新推荐文章于 2024-04-01 15:09:16 发布

阅读量129

点赞数

文章标签：信息可视化

本文链接：https://blog.csdn.net/qq_65363263/article/details/134145529

版权

<!DOCTYPE html>

<html>

<head>

<title>Echarts</title>

</head>

<body>

var myChart = echarts.init(document.getElementById('main'))

var option = {

title: {

text: '某公司分店产品销量数据',

tooltip: {},

legend: {

data: ['光谷店','关山店','街道口店','中南店','软件园店']

radar:{

name:{

textStyle:{

color:'#fff',

backgroundColor:'#999',

borderRadius:3,

padding:[3,5]

}

indicator:[

{name:'手机',max:3000},

{name:'电脑',max:3000},

{name:'笔记本电脑',max:3000},

{name:'平板',max:3000},

{name:'显卡',max:3000}]

series: [

{

type: 'radar',

data: [

{value:[ 2500,1800 , 200, 902,318 ],

{

value: [2235,1651 ,432 ,456 ,356 ],

{

value: [1456, 1242,124 ,234 ,264 ],

{

value: [2531, 1732,642 , 567, 364],

{

value: [1865,1543 ,832 , 635, 234 ],

}

]

}]

};

myChart.setOption(option);

</Script>

</body>

</html>

某公司的产品销售数据如下表，根据数据完成数据可视化。

要求：

标题为“某公司分店产品销售数据”
数据可视化需要反映出不同分店的不同产品的销量区别

品类	光谷店	关山店	街道口店	中南店	软件园店
手机	2500	2235	1456	2531	1865
电脑	1800	1651	1242	1732	1543
笔记本电脑	200	432	124	642	832
平板	902	456	234	567	635
显卡	318	356	264	364	234

效果如下：光谷店饼图：

标题为“某公司分店产品销售占比分析”
数据可视化要能反映出不同分店在整体销量的比重
要能反映出不同产品在整体销量中的比重
3、4要求应当使用不同的可视化图表显示
<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Echarts</title>

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

</head>

<body>

<div id="main" style="width: 1200px;height:800px;"></div>

<script type="text/javascript">

var myChart = echarts.init(document.getElementById('main'))

var option = {

title: {

text: '某公司分店产品销售占比分析',

subtext:'光谷店',

left:'center'

},

tooltip: {

trigger: 'item',

formatter:'{a}<br/>{b}:{c}({d}%)'},

legend: {orient:'vertical',

left:'left',

data: ['手机 ','电脑','笔记本电脑','平板','显卡']

},

series:[

{

type: 'pie',

data: [

{value:2500,

name: '手机'

},

{

value: 1800,

name: '电脑'

},

{

value: 200,

name: '笔记本电脑'

},

{

value: 902,

name: '平板'

},

{

value:318,

name: '显卡'

}

]

}]

};

myChart.setOption(option);

</Script>

</body>

</html>
效果如下：以上均需要：