Qt图表eCharts

来源：互联网发布：angular tooltips.js 编辑：程序博客网时间：2024/06/12 20:23

Qt图表eCharts

- 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',                 },            },        }    ]};

//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>

结尾

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

阅读全文

0 0