Qt图表eCharts(想一想,我的程序需要使用JS来实现功能呢?)

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Qt图表eCharts(想一想,我的程序需要使用JS来实现功能呢?)相关的知识,希望对你有一定的参考价值。

Qt图表eCharts

 

 

简述

最近,因某些需要,做了一个图表,这里用的是第三方的JS库,很强大,ECHARTS,应用起来很方便,功能很多,这里我贴出了,API文档。

效果图

技术分享图片

代码

option = {
//颜色组
    color:[‘#00A1FF‘,‘#FF7700‘],
    //提示框
    tooltip: {
        trigger: ‘axis‘,
        //提示内容,这里不懂{bo},{b1}的,可以看API文档,介绍得很详细
        formatter: ‘{b0}‘ + ‘:00-‘ + 1 + ‘:59<br/>{a0}: {c0}<br/>{a1}: {c1}‘,
        //边距
        padding: [10, 10],
    },
    //说明, -昨日 -今日
    legend:{
      data:[
        {name: ‘昨日‘,icon: ‘line‘,textStyle: {color: ‘#666666‘}},
        {name: ‘今日‘,icon: ‘line‘,textStyle: {color: ‘#666666‘}}],
    },
    //X轴
    xAxis:  {
        type: ‘category‘,
        boundaryGap: false,
        data: [‘1‘,‘2‘,‘3‘,‘4‘,‘5‘,‘6‘,‘7‘],
        axisLine: {
            lineStyle:{
                color:‘#cccccc‘,

            }
        },
        axisLabel:{
            color:‘#666666‘,
        },
        axisTick:{
            show:false
        }
    },
    //Y轴隐藏
    yAxis: {
        min: 0,
        max: 10,
        show:false,
    },
    series: [
        {
            name:‘昨日‘,
            type:‘line‘,
            smooth: true,
            data:[5, 2, 1, 6, 4, 3, 2],
            symbol:‘circle‘,
            showSymbol:false,
            lineStyle:{
                normal:{
                  color:‘#00A1FF‘,  
                },
            },
            itemStyle:{
                emphasis:{
                   color:‘#00A1FF‘, 
                },
            },
        },
        {
            name:‘今日‘,
            type:‘line‘,
            smooth: true,
            data:[2, 5, 6, 5, 3, 2, 0],
            symbol:‘circle‘,
            showSymbol:false,
            lineStyle:{
                normal:{
                  color:‘#FF7700‘,  
                },
            },
            itemStyle:{
                emphasis:{
                   color:‘#FF7700‘, 
                },
            },
        }
    ]
};            
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
//html代码
<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>
<body>
    <div id="body" style="height:400px"></div>
    <script src="echarts.common.min.js"></script>
    <script type="text/javascript">
    //初始化echarts图表
    var eChart = echarts.init(document.getElementById(‘body‘)); 
    var option;          
    //窗体自适应    
    window.onresize = eChart .resize ;        
    // 为echarts对象加载数据 
     eChart.setOption(option); 
    </script>
</body>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

结尾

这里我只自定义了自己需要的,有其它需要的,可以看官方API文档定制图表,功能还是相当强大的。 
只为记录,只为分享! 愿所写能对你有所帮助。

 

 

http://blog.csdn.net/ly305750665/article/details/78775942

以上是关于Qt图表eCharts(想一想,我的程序需要使用JS来实现功能呢?)的主要内容,如果未能解决你的问题,请参考以下文章

Qt+ECharts开发笔记:ECharts介绍下载和Qt调用ECharts基础柱状图Demo

echarts图表的大小调整的解决方案

echarts,折线图,我想设置X轴每个刻度的固定宽度该怎么设定呢

Qt+ECharts开发笔记:Qt窗口动态调整大小,使ECharts跟随Qt窗口大小变换而变换大小

ECharts-Java使用Java快速开发ECharts图表

一个页面中既有echarts2的图表也有echarts3的图表应该怎么做