|
|
@@ -0,0 +1,201 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="zh-cn">
|
|
|
+<head>
|
|
|
+ <meta charset="utf-8">
|
|
|
+ <title>ECharts</title>
|
|
|
+ <!-- 引入 echarts.js -->
|
|
|
+ <script src="echarts.min.js"></script>
|
|
|
+ <style>
|
|
|
+ html {
|
|
|
+ background-color: #041128;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
|
|
|
+<div id="line" style="width: 600px;height:240px;"></div>
|
|
|
+<div id="line2" style="width: 600px;height:300px;"></div>
|
|
|
+<div id="line3" style="width: 600px;height:300px;"></div>
|
|
|
+<div id="pie" style="width: 600px;height:400px;"></div>
|
|
|
+<div id="ring" style="width: 600px;height:400px;"></div>
|
|
|
+<div id="curve" style="width: 600px;height:240px;"></div>
|
|
|
+<div id="radar" style="width: 300px;height:300px;"></div>
|
|
|
+<div id="ccc" style="width: 600px;height:300px;"></div>
|
|
|
+<script type="text/javascript">
|
|
|
+ //const drawType = 'canvas';
|
|
|
+ const drawType = 'svg';
|
|
|
+ let line = echarts.init(document.getElementById('line'), null, {renderer: drawType});
|
|
|
+ line.hideLoading();
|
|
|
+ line.setOption({
|
|
|
+ backgroundColor: '',
|
|
|
+ xAxis: {
|
|
|
+ axisTick:{show:false}, axisLabel:{color:'rgb(139,146,158)'}, axisLine:{lineStyle:{color:'rgb(20,29,59)', width:3}},
|
|
|
+ data: ["语文","数学","英语","物理","化学","地理", '政治', '历史'],
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ axisTick:{show:false}, axisLabel:{color:'rgb(139,146,158)'}, axisLine:{lineStyle:{width:0}},
|
|
|
+ splitLine: {show: true, lineStyle:{width: 2, color: '#141D3B'}},
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ name: '错题搜拍数量', type: 'bar', barWidth: 20,
|
|
|
+ itemStyle: {normal:{color:new echarts.graphic.LinearGradient(0,0,0,1,[{offset:0,color:'#01D9FE'},{offset:1,color:'#0477D5'}])}},
|
|
|
+ data: [68,136,198,145,180,130,27,200]
|
|
|
+ }]
|
|
|
+ });
|
|
|
+ line.hideLoading();
|
|
|
+ let line2 = echarts.init(document.getElementById('line2'), null, {renderer: drawType});
|
|
|
+ line2.setOption({
|
|
|
+ backgroundColor: '',
|
|
|
+ /*tooltip : {trigger: 'axis'},*/
|
|
|
+ yAxis : [
|
|
|
+ {
|
|
|
+ type : 'category', axisTick:{show:false}, axisLabel:{color:'#8B929E'}, axisLine:{lineStyle:{color:'#4F596C', width:2}},
|
|
|
+ data: ["七(一)班","七(二)班","八(一)班","八(二)班","九(一)班"],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type : 'category',axisLine: {show:false},axisTick:{show:false},axisLabel:{show:false},splitArea:{show:false},splitLine:{show:false},
|
|
|
+ data: ["七(一)班","七(二)班","八(一)班","八(二)班","九(一)班"],
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ xAxis : {
|
|
|
+ axisTick:{show:false}, axisLine:{lineStyle:{width:0}}, splitLine: {show: true, lineStyle:{width: 1, color: '#141D3B'}},
|
|
|
+ max: 350, splitNumber: 7
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ name: '作业发布TOP', type: 'bar', barWidth: 15, yAxisIndex:1, itemStyle: {normal: {color:'#193F80', barBorderRadius:3}},
|
|
|
+ data: [350,350,350,350,350,350]
|
|
|
+ }, {
|
|
|
+ name: '作业发布TOP', type: 'bar', barWidth: 15,
|
|
|
+ itemStyle: {normal: {
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{offset: 0, color: '#0477D5'}, {offset: 1, color: '#01D9FE'}]),
|
|
|
+ barBorderRadius: 3
|
|
|
+ }},
|
|
|
+ data: [63,148,293,208,160]
|
|
|
+ }]
|
|
|
+ });
|
|
|
+ let line3 = echarts.init(document.getElementById('line3'), null, {renderer: drawType});
|
|
|
+ line3.setOption({
|
|
|
+ backgroundColor: '',
|
|
|
+ /*tooltip : {trigger: 'axis'},*/
|
|
|
+ yAxis : [
|
|
|
+ {
|
|
|
+ type : 'category', axisTick:{show:false}, axisLabel:{color:'#8B929E'}, axisLine:{lineStyle:{color:'#4F596C', width:2}},
|
|
|
+ data: ["七(一)班","七(二)班","八(一)班","八(二)班","九(一)班"],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type : 'category',axisLine: {show:false},axisTick:{show:false},axisLabel:{show:false},splitArea:{show:false},splitLine:{show:false},
|
|
|
+ data: ["七(一)班","七(二)班","八(一)班","八(二)班","九(一)班"],
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ xAxis : {
|
|
|
+ axisTick:{show:false}, axisLine:{lineStyle:{width:0}}, splitLine: {show: true, lineStyle:{width: 1, color: '#141D3B'}},
|
|
|
+ max: 350, splitNumber: 7
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ name: '作业发布TOP', type: 'bar', barWidth: 15, yAxisIndex:1, itemStyle: {normal: {color:'#193F80', barBorderRadius:3}},
|
|
|
+ data: [350,350,350,350,350,350]
|
|
|
+ }, {
|
|
|
+ name: '作业发布TOP', type: 'bar', barWidth: 15,
|
|
|
+ itemStyle: {normal: {
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{offset: 0, color: '#0477D5'}, {offset: 1, color: '#01D9FE'}]),
|
|
|
+ barBorderRadius: 3
|
|
|
+ }},
|
|
|
+ data: [63,148,293,208,160]
|
|
|
+ }]
|
|
|
+ });
|
|
|
+ let pie = echarts.init(document.getElementById('pie'), null, {renderer: drawType});
|
|
|
+ pie.setOption({
|
|
|
+ backgroundColor: '',
|
|
|
+ series : [{
|
|
|
+ name: '在线人数', type: 'pie', radius: '35%',color:['#00E4EB', '#FDB627','#0091F1'],startAngle:135,
|
|
|
+ data:[
|
|
|
+ {value:20, name:'学生 20人'},
|
|
|
+ {value:20, name:'家长 20人'},
|
|
|
+ {value:110, name:'老师 110人'}
|
|
|
+ ]
|
|
|
+ }]
|
|
|
+ });
|
|
|
+ let ring = echarts.init(document.getElementById('ring'), null, {renderer: drawType});
|
|
|
+ ring.setOption({
|
|
|
+ backgroundColor: '',
|
|
|
+ series: [{
|
|
|
+ name:'名师课观看次数', startAngle:180, type:'pie', radius: ['22%', '35%'], avoidLabelOverlap: true,
|
|
|
+ color:['#00D88B', '#6A97F3','#EB6F49','#FDB627', '#0091F1', '#00E4EB','#D1FBEF','#F9D858','#4CD0DD','#DF86F0','#F5A7C1'],
|
|
|
+ label: {normal: {show: true, position: 'left'}, emphasis: {show: true, textStyle: {fontSize: '20', fontWeight: 'bold'}}},
|
|
|
+ data:[
|
|
|
+ {value:40, name:'语文\n40次\n40%'},
|
|
|
+ {value:34, name:'政治\n34次\n34%'},
|
|
|
+ {value:17, name:'历史\n17次\n17%'},
|
|
|
+ {value:20, name:'化学\n20次\n20%'},
|
|
|
+ {value:20, name:'物理\n20次\n20%'},
|
|
|
+ {value:20, name:'生物\n20次\n20%'}
|
|
|
+ ]
|
|
|
+ }]
|
|
|
+ });
|
|
|
+ let curve = echarts.init(document.getElementById('curve'), null, {renderer: drawType});
|
|
|
+ curve.setOption({
|
|
|
+ backgroundColor: '',
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ axisTick:{show:false},
|
|
|
+ boundaryGap: false,
|
|
|
+ axisLabel:{color:'rgba(255,255,255, 0.61)', interval: 0},
|
|
|
+ axisLine:{lineStyle:{color:'rgba(30,136,229, 0.29)', width:2}},
|
|
|
+ splitLine: {show: true, lineStyle:{width: 1.6, color: '#00093a', type:'dashed'}},
|
|
|
+ data: ["语文","数学","英语","化学","政治","历史", '化学', '生物', '物理']
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value',
|
|
|
+ axisTick:{show:false},
|
|
|
+ axisLabel:{color:'rgba(255,255,255, 0.61)'},
|
|
|
+ axisLine:{lineStyle:{width:0}},
|
|
|
+ splitLine: {show: true, lineStyle:{width: 2.7, color: '#17283e'}}
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ type:'line',
|
|
|
+ symbol: 'circle', //设定为实心点
|
|
|
+ symbolSize: 8, //设定实心点的大小
|
|
|
+ smooth:true,//是否曲线
|
|
|
+ itemStyle: {normal: {color: '#DC3169', lineStyle: {color: "#DC3169"}}},
|
|
|
+ lineStyle: {normal: {width: 1.5}},
|
|
|
+ areaStyle: {normal: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
+ {offset: 0, color: 'rgba(220, 49, 105, 0.35)'}, {offset: 1, color: 'rgba(0, 10, 59, 0.02)'}
|
|
|
+ ])}},
|
|
|
+ data: [88,96,163,270,300,112,215,300,198,398]
|
|
|
+ }]
|
|
|
+ });
|
|
|
+ let radar = echarts.init(document.getElementById('radar'), null, {renderer: drawType});
|
|
|
+ radar.setOption({
|
|
|
+ backgroundColor: '',
|
|
|
+ radar: [{
|
|
|
+ indicator: [
|
|
|
+ {text: '语文', color: '#ffffff', max: 1000},
|
|
|
+ {text: '数学', color: '#ffffff', max: 1000},
|
|
|
+ {text: '英语', color: '#ffffff', max: 1000},
|
|
|
+ {text: '物理', color: '#ffffff', max: 1000},
|
|
|
+ {text: '化学', color: '#ffffff', max: 1000},
|
|
|
+ {text: '生物', color: '#ffffff', max: 1000},
|
|
|
+ {text: '政治', color: '#ffffff', max: 1000},
|
|
|
+ {text: '历史', color: '#ffffff', max: 1000},
|
|
|
+ ],
|
|
|
+ center: ['46%', '50%'], startAngle: 90, splitNumber: 5, shape: 'line',
|
|
|
+ name: {formatter: '{value}', textStyle: {color: '#595959', fontSize: 13}},
|
|
|
+ splitArea: {show: false, areaStyle: {color: 'rgba(0,0,0,0)'}},
|
|
|
+ axisLine: {lineStyle: {color: 'rgba(128, 128, 128, 0)'}},
|
|
|
+ splitLine: {lineStyle: {color: '#01C4F7',width: 2}},
|
|
|
+ }],
|
|
|
+ series: [{
|
|
|
+ name: '雷达图',
|
|
|
+ type: 'radar',
|
|
|
+ itemStyle: {emphasis: {lineStyle: {width: 4}}},
|
|
|
+ data: [{
|
|
|
+ lineStyle: {normal: {opacity: 0}}, itemStyle: {normal: {opacity: 0}},
|
|
|
+ areaStyle:{normal:{color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5,[{offset: 0, color: '#5CA1FF'},{offset: 1, color: '#0162E7'}],false)}},
|
|
|
+ value: [100, 200, 300, 400, 500, 600, 700, 1000],
|
|
|
+ }]
|
|
|
+ }]
|
|
|
+ });
|
|
|
+ radar.resize()
|
|
|
+</script>
|
|
|
+</body>
|
|
|
+</html>
|
wangsaitao