如何用echart来可视化渲染数据的一篇笔记

技术论点 Loading... 阅读 0

说明:

需要注意的是你如果使用百度的echart这个js模块来开发可视化数据,首先需要的就是你需要提供对应的数据。

这一段内容是我在仿别人网站的过程中需要的,到最后我依旧没有用php搞出来我需要的数组数据。最后不了了之了,就当做一次笔记吧,暂时不考虑别的了。

其中,xAxis 里面的data 数组对应的是数组的key,解释为时间日期;series 里面的 data 是数组中的 value ,解释为对应日期的浏览量。

使用php查询半天依旧没弄出来,原本是按照时间查询数据库,发现数据库没对应的数据,之后打算从今天开始每日记录文章的点击数,发现太麻烦。。。。。

演示图片:

如何用echart来可视化渲染数据的一篇笔记

完整的代码:

<script src="https://cdn.staticfile.org/echarts/4.6.0/echarts.min.js"></script> 
<div class="part">
    <p class="tt"><span>浏览统计(最近30天)</span></p>  
    <div class="items">
        <div id="echart">
            <script defer type="text/javascript">
                var dom = document.getElementById("echart");
                var myChart = echarts.init(dom);
                var app = {};  
                
                
                option = null;
                option = {
                            color: ['#ef1616'],
                            tooltip: {
                                trigger: 'axis',
                            },
                                calculable : true,
                    grid: {
                                left: '2%',
                                top: '25px',
                                right: '2%',
                                bottom: '60px',
                                containLabel: true
                            },
                    dataZoom: [{   // 这个dataZoom组件,默认控制x轴。
                                   type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
                                   start: 50,      // 左边在 10% 的位置。
                                   end: 100         // 右边在 60% 的位置。
                                                       
                               }],          
                    xAxis: [{
                                type: 'category',
                                splitLine: {
                                    show: false
                                },                
                                axisLine: {
                                    show: !1
                                },
                                axisTick: {
                                    show: !1
                                },
                                axisLabel: {
                                    show: true,
                                    margin: 20,                   
                                    textStyle: {
                                        color: '#999',
                                        'fontSize': 12,
                                    }
                                },               
                                boundaryGap:false,
                              data: ['10-18', '10-19', '10-20', '10-21', '10-22', '10-23', '10-24', '10-25', '10-26', '10-27', '10-28', '10-29', '10-30', '10-31', '11-01', '11-02', '11-03', '11-04', '11-05', '11-06', '11-07', '11-08', '11-09', '11-10', '11-11', '11-12', '11-13', '11-14', '11-15', '11-16']
                            }],
                             
                    yAxis: [{
                                type: 'value',
                                axisLine: {
                                    lineStyle: {
                                        color: ["#c1c6ca"]
                                    }
                                },
                                axisLabel: {
                                    show: !1,
                                    inside: true
                                },
                                splitLine: {
                                    lineStyle: {
                                        color: ["#c1c6ca"]
                                    }
                                }
                            }],
                     series: [{
                                name: '浏览量',
                                type: 'line',
                                stack: '总量',
                                itemStyle: {
                                    normal: {
                                        lineStyle: {
                                            width: 2
                                        }
                                    }
                                    
                                },
                                smooth: true,
                                
                                areaStyle: {
                                    normal: {
                                        opacity: 1,
                                        color: {
                                            x: 0,
                                            y: 0,
                                            x2: 0,
                                            y2: 1,
                                            type: "linear",
                                            global: !1,
                                            colorStops: [{
                                                offset: 0,
                                                color: "#ff5b5b"
                                            }, {
                                                offset: 1,
                                                color: "#f99191"
                                            }]
                                        }
                                    }
                                },
                                data: [0, 4, 1, 0, 0, 1, 2, 4, 4, 0, 0, 4, 1, 1, 1, 1, 0, 0, 0, 0, 1, 0, 1, 2, 5, 0, 1, 0, 2, 1]
                            }]
                };
                myChart.setOption(option);
            </script> 
        </div>
    </div>
</div>

Tags:

版权声明:若无特殊注明,本文皆为《长行客》原创,转载务必保留文章来源。

本文链接:如何用echart来可视化渲染数据的一篇笔记 & https://www.mxooo.cn/1441/

推荐阅读
发表评论 取消回复
表情 图片 链接 代码

分享