uniGUI学习之UniChart图表(57)

a]自带UniChart

b]第三方ECharts

a]自带UniChart

注意 Delphi自带的TeeChart要正常

 效果图：

01]设置数据源，X轴，Y轴。 注意数据在设置时有效

02]改变柱体颜色和透明度

03]改变名称

04]改变柱的边缘线的颜色

01]设置数据源，X轴，Y轴。 注意数据在设置时有效

双击新增数据序列：

 选择图表类型：

 

02]改变柱体颜色和透明度

 

 

03]改变名称

04]改变柱的边缘线的颜色

b]第三方ECharts

效果图:

 在线DEMO  https://echarts.apache.org/examples/zh/editor.html?c=pie-roseType-simple

下载 引用JS和调用HTML源文件

链接：https://pan.baidu.com/s/1A_MO1FHzZktmYhxgYzpLsQ
提取码：ae7i

将上述文件解压到.exe同目录下

在界面上放置一个  UniSyntaxEdit1和 UniHTMLFrame1,

将UniSyntaxEdit1.Lines设为pie-roseType-simple (1).html里内容

<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">
<head>
  <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
  <div id="container" style="height: 100%"></div>

  
  <script type="text/javascript" src="echarts.min.js"></script>
 <script type="text/javascript">
    var dom = document.getElementById('container');
    var myChart = echarts.init(dom, null, {
      renderer: 'canvas',
      useDirtyRect: false
    });
    var app = {};
    
    var option;

    option = {
  legend: {
    top: 'bottom'
  },
  toolbox: {
    show: true,
    feature: {
      mark: { show: true },
      dataView: { show: true, readOnly: false },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
  series: [
    {
      name: 'Nightingale Chart',
      type: 'pie',
      radius: [50, 250],
      center: ['50%', '50%'],
      roseType: 'area',
      itemStyle: {
        borderRadius: 8
      },
      data: [
        { value: 40, name: 'rose 1' },
        { value: 38, name: 'rose 2' },
        { value: 32, name: 'rose 3' },
        { value: 30, name: 'rose 4' },
        { value: 28, name: 'rose 5' },
        { value: 26, name: 'rose 6' },
        { value: 22, name: 'rose 7' },
        { value: 18, name: 'rose 8' },
        { value: 33, name: 'rose 9' }
      ]
    }
  ]
};

    if (option && typeof option === 'object') {
      myChart.setOption(option);
    }

    window.addEventListener('resize', myChart.resize);
  </script>
</body>
</html>

再放一个UniButton1以便及时更新图表: 要多按几次,稍微等一下 ,加载 JS 要时间.

procedure TMainForm.UniButton1Click(Sender: TObject);
begin
   UniHTMLFrame1.HTML:= UniSyntaxEdit1.Lines;
end;

 Delphi+uniGUI源文件下载:

链接：https://pan.baidu.com/s/1UNHEjcZiCHZ7uUZMxmT2dg
提取码：5244

相关属性API查找;https://echarts.apache.org/zh/api.html#echarts

 将uniGUI数据库中的数据->  UniSyntaxEdit1.Lines->  UniHTMLFrame1.HTML  即可将 数据库中数据展示出来.

procedure TMainForm.UniButton1Click(Sender: TObject);
var aStr:string;   j:integer;
begin
     j:=0;    FDquery1.First;
  while not(FDquery1.Eof) do
  begin
    j:=j+1;
     aStr:=aStr+'{ value: '+ FDquery1.FieldByName('id').AsString+     //数据库     { value: 40, name: 'rose 1' },
            ' , name: ''id '+  inttostr(j) +''' },';      //显示标签
    FDquery1.Next;
  end;
  UniHTMLFrame1.HTML.Text:= UniMemo1.Text+aStr+ unimemo2.Text;
end;