zoukankan      html  css  js  c++  java
  • 前端页面报表图在线js库

    地址:https://echarts.apache.org/examples/zh/index.html#chart-type-pie

    圆角环形图
    <!--
        THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.apache.org/examples/zh/editor.html?c=pie-borderRadius
    -->
    <!DOCTYPE html>
    <html 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="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
            <!-- Uncomment this line if you want to dataTool extension
            <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/extension/dataTool.min.js"></script>
            -->
            <!-- Uncomment this line if you want to use gl extension
            <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script>
            -->
            <!-- Uncomment this line if you want to echarts-stat extension
            <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>
            -->
            <!-- Uncomment this line if you want to use map
            <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/map/js/china.js"></script>
            <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/map/js/world.js"></script>
            -->
            <!-- Uncomment these two lines if you want to use bmap extension
            <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=<Your Key Here>"></script>
            <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@{{version}}/dist/extension/bmap.min.js"></script>
            -->
    
            <script type="text/javascript">
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};
    
    var option;
    
    
    
    //圆角环形图
    option = {
      tooltip: {
        trigger: 'item'
      },
      //顶部标签位置
      legend: {
        top: '5%',
        left: 'center'
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          //环形样式
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          //中心标签默认隐藏
          label: {
            show: false,
            position: 'center'
          },
          //字体
          emphasis: {
            label: {
              show: true,
              fontSize: '30',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: [
            { value: 1048, name: 'Search Engine' },
            { value: 735, name: 'Direct' },
            { value: 580, name: 'Email' },
            { value: 484, name: 'Union Ads' },
            { value: 300, name: 'Video Ads' }
          ]
        }
      ]
    };
    
    if (option && typeof option === 'object') {
        myChart.setOption(option);
    }
    
            </script>
        </body>
    </html>
        
  • 相关阅读:
    使用 @Autowired 的时候,到底是写接口还是实现类?
    socket的简单例子
    java 将文件夹所有的文件合并到指定的文件夹下
    java 复制某一文件夹下的所有文件到另一个文件夹下
    java Date日期总结的一些转换的方法
    java 可排序的数值得字符串,转化成list集合后进行的排序的几种方法
    java 查看文件的大小的方法
    java 从一个总的list集合中,去掉指定的集合元素,得到新的集合
    java 可拆成数组的字符串,去掉重复元素的一种方法
    将博客搬至CSDN
  • 原文地址:https://www.cnblogs.com/wjs2019/p/15529957.html
Copyright © 2011-2022 走看看