<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="echarts.min.js"></script>
<title>数据集</title>
<style type="text/css">
.titlestyle {
font-size: 36px;
height:60px;
font-style: normal;
background-color:'pink';
}
.rowstyle {
}
.tablestyle {
height: 300px;
width: 33.33%;
float: left;
}
</style>
</head>
<body>
<div class="titlestyle"><strong>标题</strong></div>
<div class="rowstyle">
<div id="chart1" class="tablestyle">图表1</div>
<div id="chart2" class="tablestyle">dataset1</div>
<div id="chart3" class="tablestyle">dataset2</div>
</div>
<div class="rowstyle">
<div id="chart4" class="tablestyle">坐标轴</div>
<div id="chart5" class="tablestyle">图例</div>
<div id="chart6" class="tablestyle">柱形图</div>
</div>
<div class="rowstyle">
<div id="chart7" class="tablestyle">堆积柱形图</div>
<div id="chart8" class="tablestyle">折线图</div>
<div id="chart9" class="tablestyle">堆叠折线图</div>
</div>
<div class="rowstyle">
<div id="chart10" class="tablestyle">区域面积图</div>
<div id="chart11" class="tablestyle">平滑曲线图</div>
<div id="chart12" class="tablestyle">阶梯线图</div>
</div>
<div class="rowstyle">
<div id="chart13" class="tablestyle">基础饼图</div>
<div id="chart14" class="tablestyle">环形图</div>
<div id="chart15" class="tablestyle">文字在环形中央的环形图</div>
</div>
<div class="rowstyle">
<div id="chart16" class="tablestyle">南丁格尔图</div>
<div id="chart17" class="tablestyle"></div>
<div id="chart18" class="tablestyle"></div>
</div>
<script src="qiaosuyue14-2.js" type="text/javascript">
<!--把<script>标签中的内容放到js当中-->
</script>
</body>
</html>
var charts1 = echarts.init(document.getElementById("chart1"),'purple-passion');
//echarts内置了dark主题，其他主题需要引用
//其他主题：打开主题编辑器，进行配置，下载主题，复制js版本，粘贴到echarts.min.js的最后就可以了
//入门手册》样式》颜色主题》主题编辑器
// 指定图表的配置项和数据
var option = {
color: [
'#7a3eef',
'#af6aec',
'#d7b0f1',
'#e3cff1',
'#dedddf'
],
//全局调色盘
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data: ['销量','销量2']
},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20],
color: [
'#759aa0'
]
//系列调色盘
},
{
name: '销量2',
type: 'bar',
data: [15, 30, 46, 20, 20, 30],
color: [
'#759aff'
]
//系列调色盘
}
//添加系列数据 series:[{series1},{series2}]
]
};
charts1.setOption(option);
var charts2 = echarts.init(document.getElementById("chart2"),'purple-passion');
var option2 = {
legend:{},
dataset:{
source:[["product","2015","2016","2017"],
["productA",111,112,113],
["productB",222,224,226]]
},
xAxis:{type:'category'},
yAxis:{},
series:[{type:'bar'},{type:'bar'},{type:'bar'}]
};
charts2.setOption(option2);
var charts3 = echarts.init(document.getElementById("chart3"),'purple-passion');
var option3 = {
legend:{},
dataset:{
dimensions:["product","2015","2016","2017"],
source:[
{product:"productA","2015":111,"2016":112,"2017":113},
{product:"productB","2015":222,"2016":224,"2017":226}
]
},
xAxis:{type:'category'},
yAxis:{},
series:[{type:'bar'},{type:'bar'},{type:'bar'}]
};
charts3.setOption(option3);
var charts4 = echarts.init(document.getElementById("chart4"),'purple-passion');
var option4 = {
legend:{},
xAxis:[
{
type:"category",
name:"月份",
axisTick:{
alignWithLabel:true
},
data:['1月', '2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
}
],
yAxis:[
{
type:'value',
name:'降水量',
min:0,
max:250,
position:'right',
axisLabel:{
formatter:'{value}ml'
}
},
{
type:'value',
name:'温度',
min:0,
max:25,
position:'left',
axisLabel:{
formatter:'{value}℃'
}
}
],
series:[
{
name:'降水量',
type:'bar',
yAxisIndex:0,
data:[6, 32, 70, 86, 68.7, 100.7, 125.6, 112.2, 78.7, 48.8, 36.0, 19.3]
},
{
name:'温度',
type:'line',
smooth:true,
yAxisIndex:1,
data:[6.0,10.2,10.3,11.5,10.3,13.2,14.3,16.4,18.0,16.5,12.0,5.2]
}
]
};
charts4.setOption(option4);
var charts5 = echarts.init(document.getElementById("chart5"),'purple-passion');
var option5 = {
legend: {
// Try 'horizontal'
orient: 'vertical',
right: 10,
top: 'center'
},
dataset: {
source: [
['product', '2015', '2016', '2017'],
['Matcha Latte', 43.3, 85.8, 93.7],
['Milk Tea', 83.1, 73.4, 55.1],
['Cheese Cocoa', 86.4, 65.2, 82.5],
['Walnut Brownie', 72.4, 53.9, 39.1]
]
},
xAxis: { type: 'category' },
yAxis: {},
series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
};
charts5.setOption(option5);
var charts6 = echarts.init(document.getElementById("chart6"),'purple-passion');
var option6 = {
legend:{},
xAxis:{
data:['A','B','C','D','E']
},
yAxis:{},
series:[
{
type:'bar',
name:'销量',
data:[100,
150,
200,
{
value:350,
itemStyle:{
color:'#ff3eef',
// shadowColor:'#ff33ee',
borderColor:'blue',
borderType:'dashed',
opacity:0.5,
// opacity的值1是完全不透明，0是完全透明
barBorderRadius:5
}
},
200],
itemStyle:{
barBorderRadius:5 //柱条圆角的半径
},
barWidth:'30%',
barGap:'20%'
},
{
type:'bar',
name:'销量2',
data:[100,150,200,350,200],
itemStyle:{ barBorderRadius:5 },
barWidth:'20%',
// barGap:'20%',
// barCategoryGap:'200%'
}
]
};
charts6.setOption(option6);
var charts7 = echarts.init(document.getElementById("chart7"),'purple-passion');
var option7 = {
legend:{},
xAxis:{data:['A同学','B同学','C同学','D同学','E同学']},
yAxis:{},
series:[
{
data:[100,90,95,70,60],
type:'bar',
name:'语文',
stack:'x',
},
{
data:[99,95,90,86,55],
type:'bar',
name:'数学',
stack:'x',
}
],
};
charts7.setOption(option7);
var charts8 = echarts.init(document.getElementById("chart8"),'purple-passion');
var option8 = {
legend:{},
xAxis:{
type:'category',
data:['A','B','C'],
},
yAxis:{
type:'value',
},
series:[
{
data:[100,150,200],
type:'line',
name:'2023',
lineStyle:{
normal:{
color:'purple',
width:5,
type:'dotted',
},
},
label:{
show:true,
position:'bottom',
textStyle:{
fontSize:20,
},
},
},
{
data:[200,150,100],
type:'line',
name:'2024',
},
],
};
charts8.setOption(option8);
var charts9 = echarts.init(document.getElementById("chart9"),'purple-passion');
var option9 = {
legend:{},
xAxis:{
type:'category',
data:['A产品','B产品','C产品','D产品','E产品'],
},
yAxis:{
type:'value',
},
series:[
{
data:[122,133,124,155,176],
name:'基础款销量',
type:'line',
stack:'x',
areaStyle:{},
},
{
data:[10,15,12,13,17],
name:'升级款销量',
type:'line',
stack:'x',
areaStyle:{},
},
],
};
charts9.setOption(option9);
var charts10 = echarts.init(document.getElementById("chart10"),'purple-passion');
var option10 = {
legend:{},
xAxis:{
type:'category',
},
yAxis:{
type:'value',
},
dataset:{
source:[
['类型','基础款销量','升级款销量'],
['产品A',23,78],
['产品B',99,12],
['产品C',11,45],
['产品D',45,89],
['产品E',89,23],
],
},
series:[
{
type:'line',
areaStyle:{},
},
{
type:'line',
areaStyle:{
color:'pink',
opacity:0.2,
},
},
],
};
charts10.setOption(option10);
var charts11 = echarts.init(document.getElementById("chart11"),'purple-passion');
var option11 = {
xAxis:{
type:'category',
data:['A','B','C','D','E'],
},
yAxis:{
type:'value',
},
series:{
data:[10,22,28,23,19],
type:'line',
smooth:true,
},
};
charts11.setOption(option11);
var charts12 = echarts.init(document.getElementById('chart12'),'purple-passion');
var option12 = {
legend:{},
xAxis:{
data:['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
},
yAxis:{},
series:[
{
name:'起点变化',
data:[10,20,30,40,50,35,15],
step:'start',
type:'line',
},
{
name:'中间变化',
type:'line',
data:[50,60,70,80,65,55,45],
step:'middle',
},
{
name:'终点变化',
type:'line',
data:[80,90,100,95,85,75,65],
step:'end',
},
],
};
charts12.setOption(option12);
var charts13 = echarts.init(document.getElementById('chart13'),'purple-passion');
var option13 = {
legend:{},
series:[{
type:'pie',
radius:'65%',
// 饼图的半径
stillShowZeroSum:false,
// 当value的和为0的时候，是否依旧显示扇形
label:{
show:false,
},
// 不显示标签
data:[{value:21,name:'男',},{value:18,name:'女',},]
}],
};
charts13.setOption(option13);
var charts14 = echarts.init(document.getElementById('chart14'),'purple-passion');
var option14 = {
series:[{
type:'pie',
radius:['40%','70%'],
data:[{value:21,name:'男',},{value:18,name:'女',}],
}],
};
charts14.setOption(option14);
var charts15 = echarts.init(document.getElementById('chart15'),'purple-passion');
var option15 = {
legend:{
x:'left',
},
series:[{
type:'pie',
radius:['40%','70%'],
avoidLabelOverlap:false,
label:{
show:false,
position:'center',
},
labelLine:{
show:false,
},
emphasis:{
label:{
show:true,
fontSize:'30',
fontWeight:'bold',
},
},
data:[{value:21,name:'男',},{value:18,name:'女',}],
}],
};
charts15.setOption(option15);
var charts16 = echarts.init(document.getElementById('chart16'),'purple-passion');
var option16 = {
legend:{},
series:[{
type:'pie',
radius:'65%',
// 饼图的半径
stillShowZeroSum:false,
// 当value的和为0的时候，是否依旧显示扇形
// label:{
// show:false,
// },
// 不显示标签
data:[
{value:3,name:'满分',},
{value:8,name:'优秀',},
{value:10,name:'良好',},
{value:5,name:'中等',},
{value:9,name:'不及格',},
]
}],
roseType:'area',
};
charts16.setOption(option16);
var charts17 = echarts.init(document.getElementById('chart17'),'purple-passion');
var option17 = {
xAxis:{
data:['Sun','Mon','Tue','Wed','Thu','Fri','Sat'],
},
yAxis:{},
series:[{
type:'scatter',
data:[220, 182, 191, 234, 290, 330, 310],
}],
};
charts17.setOption(option17);
var charts18 = echarts.init(document.getElementById('chart18'),'purple-passion');
var option18 = {
xAxis:{
min:40,
axisLine:{
onZero:false,
},
},
yAxis:{
min:600,
axisLine:{
onZero:false,
},
},
series:[{
type:'scatter',
symbol:'pin',
symbolSize:20,
data:[
[50,1000],
[52,1020],
[60,1200],
[65,1300],
[70,1400]
]
}],
};
charts18.setOption(option18);
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
