echarts3报表

最新推荐文章于 2024-09-06 11:26:45 发布

iteye_2837

最新推荐文章于 2024-09-06 11:26:45 发布

阅读量95

点赞数

文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/iteye_2837/article/details/82672630

版权

<html> <div id="main" style="width: 100%;height:400px;"></div></html>

<script type="text/javascript" src="../js/v3.0/js/jquery-1.7.2.min.js" ></script>
<script type="text/javascript" src="../js/v3.0/js/echarts.common.min.js"></script>
<script>
// 指定图表的配置项和数据
var option = {
baseOption: {
title: {
text: '日销量'
},
tooltip: {},/*配置提示框*/
legend: {
data: ["衬衫","羊毛衫"]
},
xAxis: {
axisLabel :{
interval:0,
rotate:45
} ,
nameGap:1,
data: ["2016/05/08","2016/05/09","2016/05/10","2016/05/11","2016/05/12","2016/005/13","2016/05/09","2016/05/10","2016/05/11","2016/05/12","2016/005/13","2016/05/09","2016/05/10","2016/05/11","2016/05/12","2016/005/13","2016/05/09","2016/05/10","2016/05/11","2016/05/12","2016/005/13","2016/05/09","2016/05/10","2016/05/11","2016/05/12","2016/005/13","2016/05/09","2016/05/10","2016/05/11","2016/05/12"]
},
yAxis: {},
series: [
{
name: '衬衫',
type: 'line',/*图表类型 bar(柱状图),line(line)*/
data: [5, 20, 36, 10, 10, 20, 20, 36, 10, 10] /*数量*/
},
{
name: '羊毛衫',
type: 'line',/*图表类型 bar(柱状图),line(line)*/
data: [20, 5, 60, 70, 40, 30, 5, 60, 70, 40] /*数量*/

}]
},
media: [/*兼容app端*/
{
option: {
legend: {
right: 'center',
bottom: "0%",
orient: 'horizontal'
},
series: [
{
radius: [20, '50%'],
center: ['25%', '50%']
},
{
radius: [30, '50%'],
center: ['75%', '50%']
}
]
}
},
{
query: {
minAspectRatio: 1
},
option: {
legend: {
right: 'center',
top: "0%",
orient: 'horizontal'
},
series: [
{
radius: [20, '50%'],
center: ['25%', '50%']
},
{
radius: [30, '50%'],
center: ['75%', '50%']
}
]
}
},
{
query: {
maxAspectRatio: 1
},
option: {
legend: {
right: 'center',
top: 0,
orient: 'horizontal'
},
series: [
{
radius: [20, '50%'],
center: ['50%', '30%']
},
{
radius: [30, '50%'],
center: ['50%', '70%']
}
]
}
},
{
query: {
maxWidth: 500
},
option: {
legend: {
top:0,
right:"20%",
orient: 'horizontal'
},
series: [
{
radius: [20, '50%'],
center: ['50%', '30%']
},
{
radius: [30, '50%'],
center: ['50%', '75%']
}
]
}
}
]
};
</script>