echarts4实现折线图、树状图、动态数据分离刷新数据

骑猪看日落 2022-05-23 03:12 344阅读 0赞

![70][]

![70 1][]

![70 2][]

![70 3][]

代码实例：

var monthByCorp3Chart;

var monthByCorp3Option=\{\};

$(function() \{  
     monthByCorp3Chart = echarts.init(document.getElementById('monthByCorp3'));  
     \});

function drawByCorp3()\{  
    monthByCorp3Option = \{  
        backgroundColor: '\#0B0B0D',//����ɫ  
        title: \{  
            text: '',  
            top:'3%'  
        \},  
        grid: \{  
            bottom: '10px',  
            left: '10px',  
            containLabel: true  
        \},  
        tooltip : \{           
            trigger: 'item',  
            showDelay: 0,  
            hideDelay: 50,  
            transitionDuration:0,  
            backgroundColor : 'rgba(72,84,101,0.9)',  
            position : function(p) \{  
                return \[p\[0\]-40, p\[1\] - 65\];  
            \},  
            extraCssText:'width:80px;height:50px', //��Ϣ���С  
            // �����ı���ʽ  
            textStyle : \{  
                color: '\#FFFFFF',  
                decoration: 'c',  
                fontFamily: 'Verdana, sans-serif',  
                //fontStyle: 'italic',  
                align:'center',  
                fontWeight: 'bold'  
            \},  
            formatter: "<div><span style='font-size:12px;width:80px;height50px'>\{b\}</span></br><span style='font-size:18px;width:80px;height50px'>\{c\}kW/h</span></div>",  
            axisPointer:\{  
                type: 'none',  
            \}     
        \},  
        legend: \{  
            data:\[\],  
            orient: 'vertical',  
            textStyle:\{  
                fontSize: 14  
            \}  
        \},  
        calculable : true,  
        xAxis: \{  
            type: 'category',  
            boundaryGap: false,  
            data: \[\],  
            axisLine:\{  
                show: false,  
            \},  
            axisTick:\{  
                lineStyle:\{  
                    color: '\#A9ED3A',  
                \}  
            \},  
            axisLabel: \{    
                interval:0,    
                formatter:function(value)\{    
                   return "";    
               \}  
            \}  
        \},  
        yAxis: \{  
            type: 'value',  
            show: false, // ����Y���Ƿ���ʾ  
        \},  
        series: \[\]  
    \};  
      
\}  
  
function loadDataByCorp3(cueName,seriesData,xAxisData)\{      
     monthByCorp3Option.legend.data = cueName;  
     monthByCorp3Option.xAxis.data = xAxisData;  
     monthByCorp3Option.series = \{  
            name:cueName,  
            data:seriesData,  
            type:"bar",  
            symbolSize: 5,  
            itemStyle : \{    
                normal : \{    
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, \[\{    
                        offset: 0,    
                        color: '\#FFA000'    
                    \}, \{    
                        offset: 1,    
                        color: '\#2DF0DB'    
                    \}\]),//��������ɫ  
                    lineStyle:\{  
                        color:'\#000000',  // �ߵ���ɫ  
                    \}  
                \},                  
            \},  
     \};  
     monthByCorp3Chart.setOption(monthByCorp3Option);

\}

详情结果请下载源码https://download.csdn.net/download/liqi\_q/10451083

[70]: /images/20220523/dbbabf54133f42f1ba54e8cf77205118.png
[70 1]: /images/20220523/3b1d11f1b5c84b62901aa0b681b774ff.png
[70 2]: /images/20220523/32f2292cea6241c1ade0b1559ac14333.png
[70 3]: /images/20220523/f6ef5c153f4b41c7923c3f4e6537bd8d.png

发表评论取消回复

表情：

评论列表（有 0 条评论，344人围观）

还没有评论，来说两句吧...

相关阅读

相关 python 数据可视化折线图动态树状图地图简单的制作

初学者可以浅浅的留下来了解一下吧！文章目录 * 前言 * 一、使用json转换数据 * * 1.导入模块json * ...

雨点打透心脏的1/2处/ 2024年04月17日 11:37/ 0 赞/ 60 阅读

相关 Echarts数据可视化第4章 Echarts可视化图 4.1 折线图

Echarts数据可视化文章目录 Echarts数据可视化第4章 Echarts可视化图 4

àì夳堔傛蜴生んèń/ 2024年03月26日 17:46/ 0 赞/ 103 阅读

相关移动端ECharts折线图“动态数据+时间坐标轴”与饼形图

以下是普通api方法，返回是list public HttpResponseMessage GetBatchRecordList(string BatchCode)

忘是亡心i/ 2022年12月11日 09:29/ 0 赞/ 208 阅读

相关 JAVA实现树状图数据结构

一开始写数据的时候,感觉数据给原始数据即可,将存在parentId和id在一起的实体类集合一股脑的封装给前台,然后前端同事肯定使用的是树状图插件,将数据一股脑堆给插件,然

电玩女神/ 2022年11月21日 04:30/ 0 赞/ 304 阅读

相关 echarts4实现折线图、树状图、动态数据分离刷新数据

![70][] ![70 1][] ![70 2][] ![70 3][] 代码实例： var monthByCorp3Chart; var monthB

骑猪看日落/ 2022年05月23日 03:12/ 0 赞/ 345 阅读

相关 echarts实现动态折线图

<!DOCTYPE html> <html> <head> <meta charset="UTF-8">

ゝ一纸荒年。/ 2022年05月15日 02:24/ 0 赞/ 813 阅读

相关 Echarts饼图展示动态数据

Echarts饼图展示动态数据注：本例是在SSM框架基础上实现的，通过其他框架或ｓｅｒｖｌｅｔ也同样可以实现;（不要纠结于此） echarts.jsp文件 <%

﹏ヽ暗。殇╰゛Y/ 2022年05月11日 11:14/ 0 赞/ 385 阅读

相关 echarts饼图动态获取数据

　　饼图获取动态数据　　首先页面引入jquery.js和echarts.js ![1378915-20180710204609898-2114475955.png][]

Myth丶恋晨/ 2022年03月20日 13:46/ 0 赞/ 464 阅读

相关 vue echarts动态数据定时刷新

关键代码截图 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

小鱼儿/ 2021年11月22日 13:56/ 0 赞/ 1253 阅读

相关 ECharts多个折线图动态获取json数据

ECharts 多个折线图动态获取json数据效果图如下： ![\\][20170803093924502.png] 一.html部分 <p id="TwoL

末蓝、/ 2021年09月15日 03:22/ 0 赞/ 451 阅读