今日学习总计

今天尝试将数据库内容导入大屏之中

<div class="column">
<div class="panel bar2">
<h2>柱形图</h2>
<div class="chart">
<script>
var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6","#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6","#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6","#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6","#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6","#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
// 1. 实例化对象
var myChart = echarts.init(document.querySelector(".bar2 .chart"));
// 2. 指定配置和数据
var arr = new Array();
var index = 0;
<c:forEach items="${yis}" var="yi">
arr[index++] = ${yi.confirmedNum};
</c:forEach>
var option = {
grid: {
top: "10%",
left: "22%",
bottom: "10%"
// containLabel: true
},
// 不显示x轴的相关信息
xAxis: {
show: false
},
yAxis: [
{
type: "category",
inverse: true,
data: [<c:forEach items="${yis}" var="y">
["${y.province}"],
</c:forEach>],
// 不显示y轴的线
axisLine: {
show: false
},
// 不显示刻度
axisTick: {
show: false
},
// 把刻度标签里面的文字颜色设置为白色
axisLabel: {
color: "#fff"
}
},
{
data: arr,
inverse: true,
// 不显示y轴的线
axisLine: {
show: false
},
// 不显示刻度
axisTick: {
show: false
},
// 把刻度标签里面的文字颜色设置为白色
axisLabel: {
color: "#fff"
}
}
],
series: [
{
name: "条",
type: "bar",
data: arr,
yAxisIndex: 0,
// 修改第一组柱子的圆角
itemStyle: {
barBorderRadius: 20,
// 此时的color 可以修改柱子的颜色
color: function(params) {
// params 传进来的是柱子对象
// console.log(params);
// dataIndex 是当前柱子的索引号
return myColor[params.dataIndex];
}
},
// 柱子之间的距离
barCategoryGap: 50,
//柱子的宽度
barWidth: 10,
// 显示柱子内的文字
label: {
show: true,
position: "inside",
// {c} 会自动的解析为 数据 data里面的数据
formatter: "{c}"
}
},
{
name: "框",
type: "bar",
barCategoryGap: 50,
barWidth: 15,
yAxisIndex: 1,
data: [100, 100, 100, 100, 100],
itemStyle: {
color: "none",
borderColor: "#00c1de",
borderWidth: 3,
barBorderRadius: 15
}
}
]
};

// 3. 把配置给实例对象
myChart.setOption(option);
// 4. 让图表跟随屏幕自动的去适应
window.addEventListener("resize", function() {
myChart.resize();
});
</script>
</div>
<div class="panel-footer"></div>
</div>

<div class="panel pie2">
<h2>饼状图</h2>
<div class="chart">
<script>
var myChart = echarts.init(document.querySelector(".pie2 .chart"));
var option = {
color: [
"#006cff",
"#60cda0",
"#ed8884",
"#ff9f7f",
"#0096ff",
"#9fe6b8",
"#32c5e9",
"#1d9dff"
],
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)"
},

series: [
{
name: "地区分布",
type: "pie",
radius: ["10%", "70%"],
center: ["50%", "50%"],
roseType: "radius",
// 图形的文字标签
label: {
fontSize: 10
},
// 链接图形和文字的线条
labelLine: {
// length 链接图形的线条
length: 6,
// length2 链接文字的线条
length2: 8
},
data: [
<c:forEach items="${yis}" var="y">
{name:"${y.province}",value:"${y.confirmedNum}"},
</c:forEach>
]
}
]
};
myChart.setOption(option);
// 监听浏览器缩放，图表对象调用缩放resize函数
window.addEventListener("resize", function() {
myChart.resize();
});
</script>
</div>
<div class="panel-footer"></div>
</div>
</div>
</sectionc>
<script src="js/flexible.js"></script>
</body>