qq21497936

前言

  上一篇成功是EChart随着Qt窗口变化而变化,本篇将开始正式介绍柱状图介绍、基础使用,并将其封装一层Qt。
  本篇的demo实现了隐藏js代码的方式,实现了一个条形图的基本交互方式,即Qt调用js脚本操作html。

 

Demo演示

  请添加图片描述

 

ECharts调试工具

  ECharts提供的纯JS代码编辑开发调试工具,可编辑js,并且查看运行效果:
  https://echarts.apache.org/examples/zh/editor.html
  在这里插入图片描述
  开发过程中对于属性的查询和调试ECharts也提供了配置帮助。
  官方配置手册:https://echarts.apache.org/zh/option.html
  在这里插入图片描述

 

目标

  随便找一个预期目标:
  在这里插入图片描述

 

ECharts接口静态方式

  使用EChart调试工具开发,先调试出基础框架。
  这里贴出的全部代码:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <!--<script src="echarts.js"></script>-->
    <script src="./echarts.js"></script>
    <!--<script src="D:/qtProject/echartsDemo/echartsDemo/modules/barEChartWidget/html/echarts.js"></script>-->
    <!--<script src="echarts.min.js"></script>-->
    <!--<script src="./echarts.min.js"></script>-->
    <!--<script src="./html/echarts.min.js"></script>-->
    <!--<script src="D:/qtProject/echartsDemo/echartsDemo/modules/barEChartWidget/html/echarts.min.js"></script>-->
  </head>
  <body>

    <!--设置body跟随查u哪个口,main填充body-->
    <style>
        #main,
        html,
        body{
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        #main {
            width: 100%;
            height: 100%;
        }
    </style>


    <div id="main"></div>
    <script type="text/javascript">
        // 基于准备好的dom,初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        // 窗口高度变化设置
        window.onresize = function() {
            myChart.resize();
        };
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data: ['销量']
            },
            xAxis: {
            data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
            },
            yAxis: {},
            series: [
                {
                    name: '销量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);


        function initJs() {
            var myChart = echarts.init(document.getElementById(

分类:

技术点:

相关文章: