ECharts Getting Started Guide: How to Use ECharts

ECharts Getting Started Guide: How to use ECharts, specific code examples are required

ECharts is a JavaScript-based data visualization library. By using ECharts, users can easily display Various charts, such as line charts, bar charts, pie charts, etc. This article will introduce you to how to use ECharts and provide detailed code examples.

1. Installing ECharts

To use ECharts, you first need to install it. You can download ECharts from the ECharts official website https://echarts.apache.org/zh/index.html, or install it using npm. If you choose to use npm, you can install it with the following command:

npm install echarts --save

2. Create a new ECharts page

Before creating a new ECharts page, you need an HTML page to host it ECharts. In the HTML, you need to include ECharts' JavaScript file. You can import it via:

<script src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.min.js"></script>

Once you have imported the ECharts JavaScript file, you can start creating your first ECharts instance. We recommend that you add a div element to the page before doing this so that you can render the chart into the page. You can add a div element in HTML like this:

<div id="chart" style="width: 600px;height:400px;"></div>

3. Create your first ECharts chart

The basics needed to create ECharts in HTML elements, next you need to write the code to implement your ECharts chart. The following is a very simple example of a line chart:

// 1. 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('chart'));

// 2. 指定图表的配置项和数据
var option = {
    title: {
        text: 'ECharts 入门示例'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'line',
        data: [5, 20, 36, 10, 10, 20]
    }]
};

// 3. 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

Here, we first initialize a new ECharts instance by using ECharts' init function, and save this instance to In a variable myChart. We introduced some configuration items and data, including a title, a tooltip, a legend, an x-axis, a y-axis, and a data series. In this example, we use a line chart data series. Finally, we apply these configuration items to our ECharts chart by calling the setOption method.

4. Create other types of charts

In addition to line charts, ECharts also supports many other types of charts, such as bar charts, pie charts, scatter charts, radar charts, etc. wait. Below is sample code for a bar chart and a pie chart:

Bar chart:

// 1. 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('chart'));

// 2. 指定图表的配置项和数据
var option = {
    title: {
        text: 'ECharts 入门示例'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
};

// 3. 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

Pie chart:

// 1. 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('chart'));

// 2. 指定图表的配置项和数据
var option = {
    title: {
        text: 'ECharts 入门示例',
        subtext: '饼图示例'
    },
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        x: 'left',
        data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
    },
    series: [
        {
            name:'访问来源',
            type:'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    show: true,
                    textStyle: {
                        fontSize: '30',
                        fontWeight: 'bold'
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data:[
                {value:335, name:'直接访问'},
                {value:310, name:'邮件营销'},
                {value:234, name:'联盟广告'},
                {value:135, name:'视频广告'},
                {value:1548, name:'搜索引擎'}
            ]
        }
    ]
};

// 3. 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

5. Summary

Creating charts with ECharts is a relatively simple task, as long as you have some basic JavaScript knowledge. In this article, we provide you with an introductory tutorial that will help you get started with ECharts. If you need more information and code examples, you can visit the ECharts official website https://echarts.apache.org/zh/index.html.

The above is the detailed content of ECharts Getting Started Guide: How to Use ECharts. For more information, please follow other related articles on the PHP Chinese website!