Echarts3.0中利用dataset进行数据管理,并封装图表生成方法

maxmin 发布于2019-08-23 18:14 / 2406人阅读

摘要：效果图放置图表的元素选择器市场饮料销售情况图表标题吨放置图表的元素选择器图表大标题单位系列数据轴数据类目数据单位

效果图

let rst = [
            {
                name: "Matcha Latte",
                data:[
                    {time: "2012",num: 365},
                    {time: "2013",num: 815},
                    {time: "2014",num: 665},
                    {time: "2015",num: 565},
                ]
            },{
                name: "Milk Tea",
                data:[
                    {time: "2012",num: 265},
                    {time: "2013",num: 615},
                    {time: "2014",num: 465},
                    {time: "2015",num: 965},
                ]
            },{
                name: "Cheese Cocoa",
                data:[
                    {time: "2012",num: 765},
                    {time: "2013",num: 215},
                    {time: "2014",num: 765},
                    {time: "2015",num: 165},
                ]
            }
        ];
        

        let chartOption = {
            el:"#chart",//放置图表的元素css选择器
            title: "市场饮料销售情况",//图表标题
            unit: "吨",
            dataArr: rst,
            
        }

        
        /**
         * chtOption = {
         *  el:"", //放置图表的元素css选择器
            title: "", //图表大标题
            unit: [], //单位
         * }
         * 
         * */
        function barChart (chtOption){
            let myChart = echarts.init(document.querySelector("#chart"));
            let dataObj = {
                series: [],//系列数据
                xData:[],//x轴数据
                yData:[],//类目数据
                source: [],
                chartType: [],
                
            }
            for(let i in chtOption.dataArr[0].data){
                dataObj.series.push(chtOption.dataArr[0].data[i].time);
            }
            for(let i in chtOption.dataArr){
                let perSeries = [];
                perSeries.push(chtOption.dataArr[i].name);
                for(let j in chtOption.dataArr[i].data){
                    perSeries.push(chtOption.dataArr[i].data[j].num);
                    
                }
                dataObj.xData.push(perSeries);
                dataObj.yData.push(chtOption.dataArr[i].name);
            }
            let dataSeries =  ["name_value"];
            for(let i in dataObj.series){
                dataSeries.push(dataObj.series[i]);
                dataObj.chartType.push({type: "bar"});
            }
            dataObj.source.push(dataSeries);
            for(let i in dataObj.xData){
                dataObj.source.push(dataObj.xData[i]);
            }
            let option = {
                title: {
                    text: chtOption.title,
                    textAlign: "left"
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow"
                    }
                },
                legend: {
                    data: chtOption.series
                },
                grid: {
                    left: "3%",
                    right: "12%",
                    bottom: "3%",
                    top: "10%",
                    containLabel: true
                },
                dataset: {
                    source: dataObj.source
                },
                xAxis: [
                    { gridIndex: 0,name: "单位: " + chtOption.unit}
                ],
                yAxis: [
                    {type: "category",gridIndex: 0}
                ],
                series: dataObj.chartType
            };

            myChart.setOption(option);
        }
        
        barChart(chartOption);

GPU云服务器云服务器 php数据生成图表利用python进行数据分析利用公有云进行数据备份利用python进行数据分析第二版pdf

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104885.html

antv g2的理解总结

摘要：也同样支持配置项声明构成一个可视化框架需要四部分数据处理模块，对数据进行加工的模块，包括一些数据处理方法。因此上的同基本相同。总结起来，分面其实提供了两个功能按照指定的维度划分数据集对图表进行排版。 G2 G2本身是一门图形语法，G2和传统的图表系统（HighCharts，ACharts等）不同，G2是一个基于统计分析的语义化数据可视化系统。它真正做到了让数据驱动图形，让你在使用它时候...

baihe 2019-08-22 14:54 评论0 收藏0
三大图表库：ECharts 、 BizCharts 和 G2，该如何选择？

摘要：最近阿里正式开源的图表库基于技术栈，各个图表项皆采用了组件的形式，贴近的使用特点。相关文档组件化阿里的图表组件手拉手，用开发动态刷新组件文档地址一安装通过引入二引用成功安装完成之后，即可使用或进行引用。最近阿里正式开源的BizCharts图表库基于React技术栈，各个图表项皆采用了组件的形式，贴近React的使用特点。同时BizCharts基于G2进行封装，Bizcharts也继承了G2相...

draveness 2019-04-23 13:19 评论0 收藏0
又快又好！巧用ChartJS打造你的实用折线图

摘要：又快又好巧用打造你的实用折线图最终效果本示例利用官方示例改造而成，生成带图示的折线图，标出各折线的名称，可以筛选想要显示的折线。了解了上折线图的数据结构，大家也就明白了显示一条折线，即是添加隐藏一条折线，即是将其去除。又快又好！巧用ChartJS打造你的实用折线图最终效果 showImg(https://segmentfault.com/img/bVq52r); 本示例利用官方示例...

channg 2019-08-19 17:05 评论0 收藏0
又快又好！巧用ChartJS打造你的实用折线图

摘要：又快又好巧用打造你的实用折线图最终效果本示例利用官方示例改造而成，生成带图示的折线图，标出各折线的名称，可以筛选想要显示的折线。了解了上折线图的数据结构，大家也就明白了显示一条折线，即是添加隐藏一条折线，即是将其去除。又快又好！巧用ChartJS打造你的实用折线图最终效果 showImg(https://segmentfault.com/img/bVq52r); 本示例利用官方示例...

Airmusic 2019-08-30 12:43 评论0 收藏0
又快又好！巧用ChartJS打造你的实用折线图

摘要：又快又好巧用打造你的实用折线图最终效果本示例利用官方示例改造而成，生成带图示的折线图，标出各折线的名称，可以筛选想要显示的折线。了解了上折线图的数据结构，大家也就明白了显示一条折线，即是添加隐藏一条折线，即是将其去除。又快又好！巧用ChartJS打造你的实用折线图最终效果 showImg(https://segmentfault.com/img/bVq52r); 本示例利用官方示例...

junfeng777 2019-08-01 14:57 评论0 收藏0