Echarts用法详细介绍-tutorial js-php.cn

Rumah

hujung hadapan web

tutorial js

Echarts用法详细介绍

巴扎黑

Aug 12, 2017 pm 04:12 PM

echarts memperkenalkan penggunaan

这篇文章主要介绍了Echarts基本用法，详解的介绍了Echarts的基本用法和实例，有兴趣的可以了解一下

echarts太完美了：

1，开源软件，无私的为我们提供漂亮的图形界面；

2，使用简单，默默的为我们封装了重要的js，只要会引用就会使用echarts；

3，种类多，echarts为我们提供了各种图标，其中最具象征的就是地图了；

4，兼容性好，基于html5动画渲染超棒。

echarts官网提供了源码和说明文档，使用echarts需要先到官网下载需要的js源文件。

官网上的demo中夹杂着很多我们用不到的东西，想使用饼状图就得从demo中把不用的去掉，劈植斩叶留下最原始的功能实现。这样毕竟比较费时，我就在裁剪后的代码中加以总结于是乎新的使用教程如下所示：

echarts饼状图实现步骤：

1，在简单的html中引入js文件

<head> 
  <meta charset="utf-8"> 
  <title>Charts demo</title> 
   <script src="js/esl.js"></script> 
</head> 
<body> 
</body>

Salin selepas log masuk

2，为图形准备容器

<head> 
  <meta charset="utf-8"> 
  <title>Charts demo</title> 
   <script src="js/esl.js"></script> 
</head> 
<body> 
   
  <p id="picturePlace"></p> 
  
</body>

Salin selepas log masuk

就是在html中添加一个p给定id，图表就会显示在p中。

3，模块导入js

<head> 
  <meta charset="utf-8"> 
  <title>Charts demo</title> 
   <script src="js/esl.js"></script> 
</head> 
<body> 
  <p id="picturePlace"></p> 
   <script type="text/javascript"> 
    // 路径配置 
    require.config({ 
      paths:{  
        &#39;echarts&#39; : &#39;js/echarts&#39;, 
        &#39;echarts/chart/pie&#39; : &#39;js/echarts&#39; 
      } 
    }); 
  </script> 
</body>

Salin selepas log masuk

4，添加显示数据

<head> 
  <meta charset="utf-8"> 
  <title>Charts demo</title> 
   <script src="js/esl.js"></script> 
</head> 
<body> 
  <p id="picturePlace"></p> 
   <script type="text/javascript"> 
    // 路径配置 
    requireconfig({ 
      paths:{  
        &#39;echarts&#39; : &#39;js/echarts&#39;, 
        &#39;echarts/chart/pie&#39; : &#39;js/echarts&#39; 
      } 
    }); 
     
     // 使用 
    require( 
      [ 
        &#39;echarts&#39;, 
        &#39;echarts/chart/pie&#39; // 使用柱状图就加载bar模块，按需加载 
      ], 
      function (ec) { 
        // 基于准备好的dom，初始化echarts图表 
        var myChart = ec.init(document.getElementById(&#39;picturePlace&#39;));  
         
        option = { 
            title : { 
              text: &#39;某站点用户访问来源&#39;, 
              subtext: &#39;纯属虚构&#39;, 
              x:&#39;center&#39; 
            }, 
            tooltip : { 
              trigger: &#39;item&#39;, 
              formatter: "{a} {b} : {c} ({d}%)" 
            }, 
            legend: { 
              orient : &#39;vertical&#39;, 
              x : &#39;left&#39;, 
              data:[&#39;直接访问&#39;,&#39;邮件营销&#39;,&#39;联盟广告&#39;,&#39;视频广告&#39;,&#39;搜索引擎&#39;] 
            }, 
            toolbox: { 
              show : true, 
              feature : { 
                mark : {show: true}, 
                dataView : {show: true, readOnly: false}, 
                restore : {show: true}, 
                saveAsImage : {show: true} 
              } 
            }, 
            calculable : true, 
            series : [ 
              { 
                name:&#39;访问来源&#39;, 
                type:&#39;pie&#39;, 
                radius : &#39;55%&#39;, 
                center: [&#39;50%&#39;, &#39;60%&#39;], 
                data:[ 
                  {value:335, name:&#39;直接访问&#39;}, 
                  {value:310, name:&#39;邮件营销&#39;}, 
                  {value:234, name:&#39;联盟广告&#39;}, 
                  {value:135, name:&#39;视频广告&#39;}, 
                  {value:1548, name:&#39;搜索引擎&#39;} 
                ] 
              } 
            ] 
          }; 
     
        // 为echarts对象加载数据  
        myChart.setOption(option);  
      } 
    ); 
  </script> 
</body>

Salin selepas log masuk

5，运行程序显示结果

以上是饼状图的实现步骤，柱状图散点图跟这个类似就是引用js时饼状图是pie，柱状图是bar，对应的option里面的数据不同，程序的架子是一样的。

Atas ialah kandungan terperinci Echarts用法详细介绍. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

Menjana ai hentai secara percuma.

Tunjukkan Lagi

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)

4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Tetapan grafik terbaik

4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Penyelesaian Riddle Seashell

2 minggu yang lalu By DDD

R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa

4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

WWE 2K25: Cara Membuka Segala -galanya Di Myrise

1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Tunjukkan Lagi

Alat panas

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tunjukkan Lagi

Topik panas

Di manakah pintu masuk log masuk untuk e-mel gmail?

7517

Tutorial CakePHP

1378

Apakah format nama akaun stim

kunci pengaktifan win11 kekal

Sambungan NYT menunjukkan dan jawapan

Tunjukkan Lagi

Related knowledge

Pengenalan terperinci tentang apa itu wapi Jan 07, 2024 pm 09:14 PM

Pengguna mungkin pernah melihat istilah wapi apabila menggunakan Internet, tetapi bagi sesetengah orang mereka pasti tidak tahu apa itu wapi Berikut adalah pengenalan terperinci untuk membantu mereka yang tidak tahu untuk memahami. Apa itu wapi: Jawapan: wapi ialah infrastruktur untuk pengesahan dan kerahsiaan LAN wayarles. Ini seperti fungsi seperti inframerah dan Bluetooth, yang biasanya dilindungi berhampiran tempat seperti bangunan pejabat. Pada asasnya mereka dimiliki oleh jabatan kecil, jadi skop fungsi ini hanya beberapa kilometer. Pengenalan berkaitan wapi: 1. Wapi ialah protokol penghantaran dalam LAN wayarles. 2. Teknologi ini dapat mengelakkan masalah komunikasi jalur sempit dan membolehkan komunikasi yang lebih baik. 3. Hanya satu kod diperlukan untuk menghantar isyarat

Penjelasan terperinci sama ada win11 boleh menjalankan permainan PUBG Jan 06, 2024 pm 07:17 PM

Pubg, juga dikenali sebagai PlayerUnknown's Battlegrounds, ialah permainan shooting battle royale yang sangat klasik yang telah menarik ramai pemain sejak popularitinya pada 2016. Selepas pelancaran sistem win11 baru-baru ini, ramai pemain ingin memainkannya di win11 Jom ikuti editor untuk melihat sama ada win11 boleh bermain pubg. Bolehkah win11 bermain pubg? 1. Pada permulaan win11, kerana win11 perlu untuk membolehkan tpm, ramai pemain telah diharamkan dari pubg. 2. Walau bagaimanapun, berdasarkan maklum balas pemain, Blue Hole telah menyelesaikan masalah ini, dan kini anda boleh bermain pubg seperti biasa dalam win11. 3. Kalau jumpa pub

Menganalisis penggunaan dan klasifikasi ulasan JSP Feb 01, 2024 am 08:01 AM

Klasifikasi dan Analisis Penggunaan Komen JSP Komen JSP terbahagi kepada dua jenis: komen satu baris: berakhir dengan, hanya satu baris kod boleh diulas. Komen berbilang baris: bermula dengan /* dan berakhir dengan */, anda boleh mengulas berbilang baris kod. Contoh ulasan satu baris Contoh ulasan berbilang baris/**Ini ialah ulasan berbilang baris*Boleh mengulas pada berbilang baris kod*/Penggunaan ulasan JSP Komen JSP boleh digunakan untuk mengulas kod JSP agar lebih mudah dibaca

Cara menggunakan fungsi keluar dalam bahasa C dengan betul Feb 18, 2024 pm 03:40 PM

Cara menggunakan fungsi keluar dalam bahasa C memerlukan contoh kod khusus Dalam bahasa C, kita selalunya perlu menamatkan pelaksanaan program pada awal program, atau keluar dari program dalam keadaan tertentu. Bahasa C menyediakan fungsi exit() untuk melaksanakan fungsi ini. Artikel ini akan memperkenalkan penggunaan fungsi exit() dan memberikan contoh kod yang sepadan. Fungsi exit() ialah fungsi perpustakaan standard dalam bahasa C dan disertakan dalam fail pengepala. Fungsinya adalah untuk menamatkan pelaksanaan program, dan boleh mengambil integer

Penggunaan fungsi WPSdatedif Feb 20, 2024 pm 10:27 PM

WPS ialah suite perisian pejabat yang biasa digunakan, dan fungsi jadual WPS digunakan secara meluas untuk pemprosesan dan pengiraan data. Dalam jadual WPS, terdapat fungsi yang sangat berguna, fungsi DATEDIF, yang digunakan untuk mengira perbezaan masa antara dua tarikh. Fungsi DATEDIF ialah singkatan daripada perkataan Inggeris DateDifference Sintaksnya adalah seperti berikut: DATEDIF(start_date,end_date,unit) dengan start_date mewakili tarikh mula.

Memperkenalkan kaedah penalaan bunyi Win 11 terkini Jan 08, 2024 pm 06:41 PM

Selepas mengemas kini kepada win11 terkini, ramai pengguna mendapati bahawa bunyi sistem mereka telah berubah sedikit, tetapi mereka tidak tahu bagaimana untuk menyesuaikannya Jadi hari ini laman web ini membawakan anda pengenalan kepada kaedah pelarasan bunyi win11 terkini untuk komputer anda. Ia tidak sukar untuk dikendalikan dan pilihannya pelbagai, datang dan muat turun dan cuba. Cara melaraskan bunyi sistem komputer terkini Windows 11 1. Mula-mula, klik kanan ikon bunyi di sudut kanan bawah desktop dan pilih "Tetapan Main Semula". 2. Kemudian masukkan tetapan dan klik "Speaker" dalam bar main balik. 3. Kemudian klik "Properties" di bahagian bawah sebelah kanan. 4. Klik bar pilihan "Tingkatkan" dalam sifat. 5. Pada masa ini, jika √ di hadapan "Lumpuhkan semua kesan bunyi" ditandakan, batalkannya. 6. Selepas itu, anda boleh memilih kesan bunyi di bawah untuk ditetapkan dan klik

Panduan Pemula PyCharm: Analisis Komprehensif Fungsi Penggantian Feb 25, 2024 am 11:15 AM

PyCharm ialah persekitaran pembangunan bersepadu Python yang berkuasa dengan fungsi dan alatan yang kaya yang boleh meningkatkan kecekapan pembangunan dengan ketara. Antaranya, fungsi penggantian merupakan salah satu fungsi yang kerap digunakan dalam proses pembangunan, yang boleh membantu pembangun mengubah suai kod dengan cepat dan meningkatkan kualiti kod. Artikel ini akan memperkenalkan fungsi gantian PyCharm secara terperinci, digabungkan dengan contoh kod khusus, untuk membantu orang baru menguasai dan menggunakan fungsi ini dengan lebih baik. Pengenalan kepada fungsi gantian Fungsi gantian PyCharm boleh membantu pembangun dengan cepat menggantikan teks yang ditentukan dalam kod

Maklumat terperinci tentang lokasi pemacu pencetak pada komputer anda Jan 08, 2024 pm 03:29 PM

Ramai pengguna memasang pemacu pencetak pada komputer mereka tetapi tidak tahu cara mencarinya. Oleh itu, hari ini saya membawakan anda pengenalan terperinci mengenai lokasi pemacu pencetak dalam komputer Bagi mereka yang belum tahu, mari kita lihat di mana untuk mencari pemacu pencetak Apabila menulis semula kandungan tanpa mengubah maksud asal. anda perlu Bahasa ditulis semula ke bahasa Cina, dan ayat asal tidak perlu muncul Pertama, adalah disyorkan untuk menggunakan perisian pihak ketiga untuk mencari 2. Cari "Kotak Alat" di sudut kanan atas klik "Pengurus Peranti" di bawah. Ayat yang ditulis semula: 3. Cari dan klik "Pengurus Peranti" di bahagian bawah 4. Kemudian buka "Print Queue" dan cari peranti pencetak anda. Kali ini ialah nama dan model pencetak anda. 5. Klik kanan peranti pencetak dan anda boleh mengemas kini atau menyahpasangnya.

See all articles