BarChart.aspx

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="BarChart.aspx.cs" Inherits="WebChart.BarChart" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="jsnew/echarts.js"></script>
    <link href="css/Comm.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
        <table width="100%" border="1" height="760px">
            <tr>
                <td align="center" width="10%">
                    <a href="index.aspx" style="font-family: Arial; font-size: 18px; color: #00FFFF;">返回主页</a>
                </td>
                <td width="80%">
                    <div align="center" style="font-size: 48px; color: white;">柱形图</div>
                </td>
                <td align="center" style="font-size: 18px; font-weight: bold;" width="10%">
                    <asp:Literal ID="Ltldate" runat="server"></asp:Literal><br />
                    <asp:Literal ID="Ltltime" runat="server"></asp:Literal><br />
                </td>
            </tr>
            <tr>
                <td colspan="3" width="1050px" style="background-color: white; height: 700px;" align="center" valign="top">
                    <div id="main" style="height: 650px; width: 1050px;">
                        <!--Step:1 Prepare a dom for ECharts which (must) has size (width & hight)-->
                        <!--Step:1 为ECharts准备一个具备大小（宽高）的Dom-->
                        <!--Step:2 Import echarts-all.js-->
                        <!--Step:2 引入echarts-all.js-->
                        <script src="js/echarts-all.js"></script>

                        <script type="text/javascript">
                            // Step:3 echarts & zrender as a Global Interface by the echarts-plain.js.
                            // Step:3 echarts和zrender被echarts-plain.js写入为全局接口
                            var myChart = echarts.init(document.getElementById('main'));
                            myChart.setOption({
                                title: { //图表标题，可以通过show:true/false控制显示与否，subtext:'二级标题',
                                    text: '产量柱形图',
                                    textStyle: {
                                        fontSize: 20, //标题字体的大小
                                        color: '#000',//标题字体颜色
                                    }
                                },
                                grid: { show: 'true', borderWidth: '0' },
                                tooltip: {
                                    trigger: 'axis'
                                },
                                legend: {
                                    data: [{
                                        name: '总数(单位:XX)',
                                        textStyle: {
                                            color: '#000'
                                        }

                                    }],
                                    textStyle: { //图例文字的样式