Echars属性深度使用

Echars属性深度使用_第1张图片


<html  lang="en">
<head>
    <meta charset="UTF-8">
    <title>柱状图title>
    
    <script type="text/javascript" src="/static/common/jquery.min.js">script>
    <script src="/static/echars/echarts.min.js">script>
    <style>
        html,body{
            height: 100%;
            padding: 0;
            margin: 0;
        }
    style>
    <script>
        $(function () {
            var targetDom=$("#line")[0]
            var chart = echarts.init(targetDom);
            var option = {
                title: {
                    text: '柱状图',
                    subtext:"学生成绩",
                    left :"left"
                },
                legend:{
                    data:["成绩"],
                    left:'left',
                    top:'center',
                    itemWidth :10,
                    itemHeight :10
                },
                tooltip:{},
                xAxis:{
                    type:'category',
                    data:["计算机","英语","数学","语文","社会科学"],
                    axisPointer:{
                        show:true
                    }
                },
                yAxis:{
                    type: 'value',
                    min:0,
                    max:100,
                    interval:10,
                    splitLine:{
                        show:false
                    },
                    axisLabel:{
                        formatter: '{value}',
                        textStyle: {
                            color: function (value, index) {
                                if(value<=60){
                                    return "red";
                                }else if(value <=80){
                                    return "orange"
                                }else{
                                    return 'green';
                                }
                            }
                        }
                    },
                    minorTick:{
                        show: true
                    },
                    axisPointer:{
                        show:true
                    }
                },
                visualMap: {
                    type:'piecewise',
                    min: 0,
                    max: 100,
                    splitNumber: 5,
                    orient : 'horizontal',
                    color: ['green','orange','red'],
                    textStyle: {
                        color: 'black',
                        align:"right"
                    },
                    left:'center',
                    top:'top',
                    inverse:true
                },
                dataZoom:[{
                    orient : 'vertical',
                    yAxisIndex:0
                },{
                    orient : 'horizontal',
                    xAxisIndex:0,
                    top:'bottom'
                }],
                toolbox: {
                    show: true,
                    feature: {
                        dataZoom: {
                        },
                        magicType: {type:['line', 'bar', 'stack', 'tiled']},
                        restore: {},
                        saveAsImage: {}
                    }
                },
                series:[
                    {
                        name:"成绩",
                        type:"bar",
                        data: [90,95,80,70,80],
                        markLine: {
                            data: [
                                {type: 'average', name: '平均值'}
                            ]
                        }
                    }
                ]
            };
            chart.setOption(option)
        })
    script>
head>
<body>
    
    <div id="line" style="width: 50%;height:50%;float: left;">div>
body>
html>

你可能感兴趣的:(Echars)