其他分享
首页 > 其他分享> > ECharts柱状图线形图

ECharts柱状图线形图

作者:互联网

<div id="main" style="width: 100%;height:510px;"></div>
                var len = msg.row_data.record;
                var total = msg.row_data.total_records;

                var ary = [];
                var myChart = echarts.init(document.getElementById('main'));
                var option = {}
                var seriesType = ''
                if(Form == '1'){
                    //柱状
                    seriesType = 'bar';
                }else if(Form == '2'){
                    //线型
                    seriesType = 'line';
                }
                option = {
                    legend: {},
                    tooltip: {},
                    dataset: {
                        // 用 dimensions 指定了维度的顺序。直角坐标系中,如果 X 轴 type 为 category,
                        // 默认把第一个维度映射到 X 轴上,后面维度映射到 Y 轴上。
                        // 如果不指定 dimensions,也可以通过指定 series.encode
                        // 完成映射,参见后文。
                        dimensions: ['product', '员工总数', '参训人数', '完成人数'],
                        source: []
                    },
                    // 声明一个 X 轴,类目轴(category)。默认情况下,类目轴对应到 dataset 第一列。
                    xAxis: { type: 'category' },
                    // 声明一个 Y 轴,数值轴。
                    yAxis: {},
                    // 声明多个 bar 系列,默认情况下,每个系列会自动对应到 dataset 的每一列。
                    series: [{ type: seriesType }, { type: seriesType }, { type: seriesType }]
                };
                $(len).each(function(index,item){
                    var obj = {
                        product: item.CurrYear + '年' + item.CurrMonth + '月',
                        '员工总数': item.StaffCount_Total,
                        '参训人数': item.StaffCount_Actual,
                        '完成人数': item.StaffCount_Finish
                    }
                    ary.push(obj);
                })
                option.dataset.source = ary;
                myChart.setOption(option);
Scripts/echarts.min.js
https://echarts.apache.org/handbook/zh/get-started

标签:option,seriesType,item,柱状图,线形,var,dataset,type,ECharts
来源: https://www.cnblogs.com/liufeiran/p/15420945.html