ECharts柱状图和折线图使用实例

        //生成故障柏拉图
        function CreateFaultPareto(obj) {
            var ParetoName = [];
            var ParetoCount = [];
            var ParetoRate = [];

            $.each(eval(obj), function (index, value) {
                ParetoName.push(value.PartFault);
                ParetoCount.push(value.FaultCount);
                ParetoRate.push(value.FaultRate);
            })

            var avgValue = GetMax(ParetoCount, 5);
            var maxValue = avgValue * 5;

            var faultParetoChart =         
            echarts.init(document.getElementById("FaultParetoChart"));
            option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },
                toolbox: {
                },
                legend: {
                    data: ['故障数', '故障占比']
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ParetoName,
                        axisPointer: {
                            type: 'shadow'
                        },
                        axisLabel: {
                            interval: 0,
                            rotate: 15
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '故障数',
                        min: 0,
                        max: maxValue,
                        interval: avgValue,
                        axisLabel: {
                            formatter: '{value}'
                        }
                    },
                    {
                        type: 'value',
                        name: '故障占比',
                        min: 0,
                        max: 1,
                        interval: 0.2,
                        axisLabel: {
                            formatter: '{value}'
                        }
                    }
                ],
                series: [
                    {
                        name: '故障数',
                        type: 'bar',
                        data: ParetoCount
                    },
                    {
                        name: '故障占比',
                        type: 'line',
                        yAxisIndex: 1,
                        data: ParetoRate
                    }
                ]
            };
            faultParetoChart.setOption(option, true);
        }

        //生成折线图
        function CreateDiagramLine(obj, divId) {
            obj = $.parseJSON(obj);
            if ($.isEmptyObject(obj) == true) {
                obj = {};
                obj.legend = [];
                obj.xAxis = [];
                obj.series = [];
            }
            var myChart = echarts.init(document.getElementById(divId));
            option = {
                tooltip: {
                    trigger: 'axis',
                    position: function (point, params, dom, rect, size) {
                        // 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x                        
                           轴向右，y轴向下
                        // 提示框位置
                        var x = 0; // x坐标位置
                        var y = 0; // y坐标位置

                        // 当前鼠标位置
                        var pointX = point[0];
                        var pointY = point[1];
                        // 提示框大小
                        var boxWidth = size.contentSize[0];
                        var boxHeight = size.contentSize[1];

                        // boxWidth > pointX 说明鼠标左边放不下提示框
                        if (boxWidth > pointX) {
                            x = 5;
                        } else { // 左边放的下
                            x = pointX - boxWidth;
                        }
                        // boxHeight > pointY 说明鼠标上边放不下提示框
                        if (boxHeight > pointY) {
                            y = 5;
                        } else { // 上边放得下
                            y = pointY - boxHeight;
                        }
                        return [x, y];
                    }
                },
                toolbox: {
                },
                legend: {
                    data: obj.legend
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: obj.xAxis,
                        axisLabel: {
                            interval: 0,
                            rotate: 45
                        }
                    }
                ],
                yAxis: {
                    scale: true,
                    type: 'value'
                },
                series: obj.series
            };
            myChart.setOption(option, true);
        }

        //获取每一步阶的值
        function GetMax(obj, step) {
            var maxValue = Math.max.apply(null, obj);
            var avgValue = Math.ceil(maxValue * 1.0 / step);
            return avgValue;
        }

后台生成折线图代码：

public GraphClass CreateGraph(DataTable dt)
    {
        GraphClass graphClass = new GraphClass();
        List<StackedLine> stackedLines = new List<StackedLine>();
        var xAxis = dt.AsEnumerable().Select(s => s.Field<string>("DateDay")).ToList().Distinct().OrderBy(o => o).ToList();
        var legend = dt.AsEnumerable().Select(s => s.Field<string>("Auto_Type")).ToList().Distinct().ToList();
        foreach (var item in legend)
        {
            var autoTypeData = dt.AsEnumerable().Where(w => w.Field<string>("Auto_Type") == item);
            StackedLine stackedLine = new StackedLine();
            stackedLine.name = item;
            stackedLine.type = "line";
            List<string> yData = new List<string>();
            for (int i = 0; i < xAxis.Count(); i++)
            {
                var singleData = autoTypeData.Where(w => w.Field<string>("DateDay") == xAxis[i]);
                if (singleData.Count() == 1)
                {
                    var value = singleData.FirstOrDefault().Field<decimal>("Value");
                    yData.Add(value.ToString());
                }
                else
                {
                    yData.Add("");
                }
            }
            stackedLine.data = yData;
            stackedLines.Add(stackedLine);
        }

        graphClass.xAxis = xAxis;
        graphClass.legend = legend;
        graphClass.series = stackedLines;
        return graphClass;
    }

    public class GraphClass
    {
        public double maxValue { get; set; }
        public List<string> xAxis { get; set; }
        public List<string> legend { get; set; }
        public List<StackedLine> series { get; set; }
    }

    public class StackedLine
    {
        public string name { get; set; }
        public string type { get; set; }
        public List<string> data { get; set; }
    }