1.原生使用echart

• 引入js文件

    <script  src="~/Content/js/NightNurseBoard/echarts.min.js" charset="utf-8"></script>
    <script  src="~/Content/js/NightNurseBoard/echarts.js" charset="utf-8"></script>

• 页面引用

var alarm_hour = {
};
echarts.init(document.getElementById('alarm_hour')).setOption(alarm_hour);

•  初始化的时候设置大小

echarts.init(document.getElementById('alarm_hour')).resize()

 例子

 

var alarm_hour = {
    tooltip: {
        trigger: 'axis'
    },
    grid: {
        left: '2%',
        right: '7%',
        bottom: '2%',
        top:'20%',
        containLabel: true
    },
    legend: {
        data: ['每小时告警数']
    },
    toolbox: {
        show: true
    },
    calculable: true,
    xAxis: [
        {
            splitLine: {
                show: true
            },
            type: 'category',
            name: '时间',
            // prettier-ignore
            data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec', 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        }
    ],
    yAxis: [
        {
            name: '数量',
            type: 'value',
            splitLine: {
                show: true
            }
        }
    ],
    series: [
        {
            name: '每小时告警数',
            type: 'bar',
            itemStyle: {
                color: 'rgb(221,166,71)'
            },
            data: [
                2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3, 2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
            ]
        }
    ]
};

 

 

 var ageoption = {
        tooltip: {
            trigger: 'item'
        },
        graphic: [{
            type: 'text',
            left: 'center',
            top: 'middle',
            z: 10,
            style: {
                fill: '#fff',
                text: [
                    '年龄',
                    '分布'
                ].join('\n'),//实现两文本上下换行的效果
                textAlign: 'center',
                font: '1rem Heiti SC red'
            }
        }],
        series: [
            { //内圈
                color: '#21273C',
                name: 'blood1',
                type: 'pie',
                radius: ['48%', '53%'],
                center: ['50%', '50%'], //位置
                minAngle: 15,//最小角度
                startAngle: 220, //起始角度
                itemStyle: {
                    borderColor: 'rgb(1,12,77)',//
                    borderWidth: 4
                },
                label: {
                    show: false,
                    position: 'center'
                },
                data:
                    ageDatan
            },
            {
                name: '年龄分布',
                type: 'pie',
                radius: ['55%', '64%'],
                avoidLabelOverlap: true,
                minAngle: 15,//最小角度
                startAngle: 220, //起始角度
                itemStyle: {
                    borderColor: 'rgb(1,12,77)',//
                    borderWidth: 4
                },
                labelLine: {
                    show: true,//数据标签引导线
                    //length2: 20,
                    position: 'outer',
                    alignTo: 'edge',
                    margin: 10,
                    lineStyle: {
                        color: '#fff',
                    },

                },
                label: {
                    formatter: '{circle|}{circle3|}{b|{b}} \n {circle2|} {c|{c}}  ',
                    rich: {
                        circle: {
                            backgroundColor: '#fff',
                            width: 10,
                            height: 10,
                        },
                        circle2: {
                            width: 10,
                            height: 10,
                        },
                        circle3: {
                            width: 10,
                            height: 10,
                        },//占位
                        b: {
                            color: '#fff',
                            fontSize: 10,
                            width: 24,
                            marginLeft: 14,
                            align: 'center',
                        },
                        c: {
                            color: '#FCDC00',
                            fontSize: 12,
                            width: 24,
                            align: 'left',
                        },
                    },
                },
                data: ageData,
                color: ageColor
            }
        ]
    };

 

 

 

var alarm_hour = {
    tooltip: {
        trigger: 'axis'
    },
    grid: {
        left: '2%',
        right: '7%',
        bottom: '2%',
        top:'20%',
        containLabel: true
    },
    legend: {
        data: ['每小时告警数']
    },
    toolbox: {
        show: true
    },
    calculable: true,
    xAxis: [
        {
            splitLine: {
                show: true
            },
            type: 'category',
            name: '时间',
            // prettier-ignore
            data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec', 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        }
    ],
    yAxis: [
        {
            name: '数量',
            type: 'value',
            splitLine: {
                show: true
            }
        }
    ],
    series: [
        {
            name: '每小时告警数',
            type: 'bar',
            itemStyle: {
                color: 'rgb(221,166,71)'
            },
            data: [
                2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3, 2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
            ]
        }
    ]
};

 

标签：10,echart,show,true,data,使用,type,name
来源： https://www.cnblogs.com/ljingjing/p/16520442.html