ECharts柱状图线形图

2021-10-18 16:02:19 阅读：173 来源： 互联网

标签：option seriesType item 柱状图线形 var dataset type 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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

ECharts柱状图线形图