We_Relese/App/Relese/Views/Play/__/_Chart_SG.cshtml

@using WeApp.Helpers
<div class="area" id="chart-sg"></div>
@using (Html.BeginScripts())
{
    <script>
        //四功
        var siGongChart = echarts.init(document.getElementById('chart-sg'));
        function SiGongChart(data, category) {
            if (data && data.length > 0) {
                //console.log("SiGong", data);
            } else {
                console.log("SiGong-Null");
                return;
            }
            var series = [];
            for (var i = 0; i < data.length; i++) {
                var item = data[i];
                series.push({
                    name: item.name,
                    type: "bar",
                    data: item.data,
                    barMinWidth: 15,
                    barMaxWidth: 30,
                    barMinHeight: 20,
                    itemStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                {
                                    offset: 0,
                                    color: roundColor[i % 3] // 0% 处的颜色
                                }, {
                                    offset: 1,
                                    color: '#27303f' // 100% 处的颜色
                                }
                            ]
                        },
                        barBorderRadius: [0, 50, 50, 0]
                    }
                });
            }
            window.titleOpt.text = "四功评析示意图";
            var option = {
                grid: {
                    top: 30,
                    bottom: 20,
                    left: 80,
                    right: 30
                },
                legend: {
                    right: 20,
                    textStyle: {
                        color: textColor[1]
                    },
                    icon: 'circle'
                },
                title: window.titleOpt,
                yAxis: {
                    type: 'category',
                    data: category,
                    axisLabel: {
                        color: textColor[1]
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: textColor[0]
                        }
                    }
                },
                xAxis: {
                    type: 'value',
                    splitNumber: 6,
                    axisLabel: {
                        color: textColor[1]
                    },
                    axisLine: {
                        show: false,
                        lineStyle: {
                            color: textColor[0]
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: textColor[0]
                        }
                    }
                },
                series: series
            };
            //console.log(option);
            siGongChart.setOption(option);
        }
    </script>
}