What are echarts? how to use? Introduction to echarts-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

What are echarts? how to use? Introduction to echarts

Sep 11, 2018 pm 01:43 PM

echarts

Charts can intuitively display huge data to us in a suitable way. We can also obtain valuable information through chart analysis. The front-end personnel are here to display the data in a very comfortable and intuitive way. The best way to show it to others is actually ECharts. So, what exactly is echarts? how to use? This article will introduce to you the content of echarts.

First let’s take a look at what echarts is?

From the explanation on the official website, we can know that echarts is a commercial-grade data chart. It is a pure JavaScript icon library, compatible with most browsers, and the underlying layer relies on the lightweight canvas class. The library ZRender provides intuitive, vivid, interactive, and highly customizable data visualization charts. Innovative drag-and-drop recalculation, data views, value range roaming and other features greatly enhance the user experience and empower users with the ability to mine and integrate data.

In short, echarts is a library that helps with data visualization.

After reading the explanation of what echarts is, let’s take a look at How to use echarts?

We mentioned above that echarts is a commercial-grade data chart. So let’s take a look at what these charts are

Line chart (area chart), column chart (bar chart), scatter chart (bubble chart), K-line chart, pie chart (donut chart)

12 types of charts including radar chart (filled radar chart), chord chart, force-directed layout chart, map, dashboard, funnel chart, event river chart, etc.

After we know what charts are, we need to know how to use them.

First we need to download the plug-in: https://github.com/ecomfe/echarts/archive/1.4.1.zip

Then we use it An example to illustrate the basic process of using echarts.

The first step of using echarts: First, you need to introduce the JS library into the file. You can use Baidu's CDN

&lt;script src=&quot;http://s1.bdstatic.com/r/www/cache/ecom/esl/1-6-10/esl.js&quot;&gt;&lt;/script&gt;

Copy after login

The second step of using echarts: Then create a DIV for displaying the chart

&lt;div id=&quot;pie&quot; style=&quot;height:400px&quot;&gt;&lt;/div&gt;
&lt;div id=&quot;bar&quot; style=&quot;height:400px&quot;&gt;&lt;/div&gt;

Copy after login

echarts Step 3: Configure the loaded chart type and path

&lt;script type=&quot;text/javascript&quot;&gt;
        // 路径配置
        require.config({
            paths:{ 
                &#39;echarts&#39; : &#39;http://echarts.baidu.com/build/echarts&#39;,
                &#39;echarts/chart/bar&#39; : &#39;http://echarts.baidu.com/build/echarts&#39;,
        &#39;echarts/chart/pie&#39; : &#39;http://echarts.baidu.com/build/echarts&#39;
            }
        });
&lt;/script&gt;

Copy after login

echarts Step 4: Configure chart data

optionpie = {
　　title: {
　　　　text: &#39;2018年08月客户总满意度比例图&#39;,subtext: &#39;测试人员&#39;,x: &#39;center&#39;
　　},
　　tooltip: {
　　　　trigger: &#39;item&#39;,
　　　　formatter: &quot;{a}&lt;br/&gt;{b} : {c} ({d}%)&quot;
　　},
　　legend: {
　　　　orient: &#39;vertical&#39;,
　　　　x: &#39;left&#39;,
　　　　data: [&#39;满意&#39;, &#39;不满意&#39;]
　　},
　　toolbox: {
　　　　show: true,
　　　　feature: {
　　　　　　restore: true,
　　　　　　saveAsImage: true
　　　　}
　　},
　　calculable: true,
　　series: [
　　{
　　　　name: &#39;总满意度百分比&#39;,
　　　　type: &#39;pie&#39;,
　　　　radius: &#39;55%&#39;,
　　　　center: [&#39;50%&#39;, 225],
　　　　data: [
　　　　{ value: 100, name: &#39;满意&#39; },
　　　　{ value: 16, name: &#39;不满意&#39;}
　　]
　　}
　　]
};

option = {
　　title: {
　　　　text: &#39;2018年08月客户满意度分布图&#39;,subtext: &#39;测试人员&#39;,x: &#39;left&#39;
　　},
　　tooltip: {
　　　　trigger: &#39;axis&#39;,
　　　　formatter: &quot;{b}&lt;br/&gt;{a0} : {c0}&lt;br/&gt;{a1} : {c1}&quot;
　　},
　　legend: {
　　　　x: &#39;right&#39;,
　　　　padding: [5,70,5,5],
　　　　data: [&#39;满意&#39;, &#39;不满意&#39;]
　　},
　　toolbox: {
　　　　show: true,
　　　　feature: {
　　　　　　restore: true,
　　　　　　saveAsImage: true
　　　　}
　　},
　　calculable: true,
　　xAxis: [
　　{
　　　　type: &#39;category&#39;,
　　　　data: [&#39;客服人员满意度&#39;, &#39;维修人员满意度&#39;, &#39;售后人员满意度&#39;]
　　}
　　],
　　yAxis: [
　　{
　　　　type: &#39;value&#39;,
　　　　splitArea: { show: true }
　　}
　　],
　　series: [
　　{
　　　　name: &#39;满意&#39;,
　　　　type: &#39;bar&#39;,
　　　　radius: &#39;55%&#39;,
　　　　center: [&#39;50%&#39;, 225],
　　　　data: [10, 5, 8]},
　　{
　　　　name: &#39;不满意&#39;,
　　　　type: &#39;bar&#39;,
　　　　radius: &#39;55%&#39;,
　　　　center: [&#39;50%&#39;, 225],
　　　　data: [2, 4, 6]}
　　]
};

Copy after login

echarts Step 5: Display the data In charts

require(
[
　　&#39;echarts&#39;,
　　&#39;echarts/chart/pie&#39;,
　　&#39;echarts/chart/bar&#39;
],
function (ec) {
　　//饼状图
　　var pieChart = ec.init(document.getElementById(&#39;pie&#39;));
　　pieChart.setOption(optionpie);
　　
　　//柱状图
　　var myChart = ec.init(document.getElementById(&#39;bar&#39;));
　　myChart.setOption(option);
}
)

Copy after login

Related recommendations:

Echarts usage details

How to use ECharts in webpack?

The above is the detailed content of What are echarts? how to use? Introduction to echarts. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn