huangzhidong
/
guoyao-jiankang


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201
							<!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>