c#中echarts根据checkbox复选框进行动态添加多条y轴或者删除y轴

在 C# 中使用 echarts，可以通过以下步骤动态添加或删除多条 y 轴：

1. 在 HTML 文件中，定义好 echarts 图表的容器和相关的 checkbox 复选框。

<div id="chart" style="width: 100%; height: 400px;"></div>
<input type="checkbox" id="yAxis1" onchange="onYAxisChanged()" checked> Y轴1
<input type="checkbox" id="yAxis2" onchange="onYAxisChanged()" checked> Y轴2

2. 在 C# 代码中，通过 `StringBuilder` 构建 echarts 的配置项，包括 xAxis、yAxis、series 等。

StringBuilder sb = new StringBuilder();
sb.Append("option = {");
sb.Append("xAxis: {");
sb.Append("type: 'category',");
sb.Append("data: ['A', 'B', 'C', 'D', 'E', 'F']");
sb.Append("},");
sb.Append("yAxis: [");

if (yAxis1.Checked)
{
    sb.Append("{");
    sb.Append("type: 'value',");
    sb.Append("name: 'Y轴1'");
    sb.Append("},");
}

if (yAxis2.Checked)
{
    sb.Append("{");
    sb.Append("type: 'value',");
    sb.Append("name: 'Y轴2'");
    sb.Append("},");
}

// 删除最后一个逗号
sb.Remove(sb.Length - 1, 1);

sb.Append("],");
sb.Append("series: [");
sb.Append("{");
sb.Append("name: 'Series1',");
sb.Append("type: 'bar',");
sb.Append("data: [5, 20, 36, 10, 10, 20]");
sb.Append("},");
sb.Append("{");
sb.Append("name: 'Series2',");
sb.Append("type: 'line',");
sb.Append("yAxisIndex: 1,");
sb.Append("data: [10, 30, 50, 60, 70, 80]");
sb.Append("}");
sb.Append("]");
sb.Append("};");

3. 在 C# 代码中，定义 `onYAxisChanged` 函数，在复选框状态改变时，重新渲染 echarts 图表。

protected void onYAxisChanged()
{
    StringBuilder sb = new StringBuilder();
    sb.Append("option.yAxis = [");

    if (yAxis1.Checked)
    {
        sb.Append("{");
        sb.Append("type: 'value',");
        sb.Append("name: 'Y轴1'");
        sb.Append("},");
    }

    if (yAxis2.Checked)
    {
        sb.Append("{");
        sb.Append("type: 'value',");
        sb.Append("name: 'Y轴2'");
        sb.Append("},");
    }

    // 删除最后一个逗号
    sb.Remove(sb.Length - 1, 1);

    sb.Append("];");

    // 渲染图表
    chartPage.ClientScript.RegisterStartupScript(this.GetType(), "chart", sb.ToString(), true);
}