echarts图表示例

echarts图表示例

echarts.min.js文件：
链接：
https://pan.baidu.com/s/1FUzvvPH9huBrUfY3fEPHtw?pwd=2580

提取码：2580
使用echarts.min.js案例制作图表,需要从echarts网站下载示例；引入echarts.min.js文件本地化图表；否则引入的图表只能依赖网络环境；然后在代码中加入自己的数据即可

https://echarts.apache.org/zh/index.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>
          <!-- Uncomment this line if you want to dataTool extension
          <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.3.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@4.9.0/map/js/china.js"></script>
          <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/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=3.0&ak=YOUR_API_KEY"></script>
          <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.3.2/dist/extension/bmap.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 = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '5%',
            left: 'center'
          },
          series: [
            {
              name: 'Access From',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '40',
                  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: 484, name: 'Co Co' },
                { value: 300, name: 'Video Ads' }
              ]
            }
          ]
        };

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

            window.addEventListener('resize', myChart.resize);
          </script>
        </body>
        </html>
posted @ 2022-05-17 09:46  爱豆技术部  阅读(510)  评论(0)    收藏  举报