深入学习Echartsdemo

发布时间：2023-05-23

Echartsdemo 简介

Echartsdemo 是由百度公司推出的一款开源的数据可视化图表库，为开发者提供了绚丽多彩的图表展示和动画渲染效果。Echartsdemo 基于纯 JavaScript 开发，兼容性良好，支持多种数据格式和维度展示，可应用于 Web 端、移动端和桌面端。下面我们通过实战演示深入学习 Echartsdemo 的使用方法。

基础图表绘制

绘制图表的第一步是引入 Echartsdemo 库和自己的数据，数据一般是一个 JSON 对象格式。以柱状图为例：

<!-- 引入 Echartsdemo 库 -->
<script src="https://cdn.jsdelivr.net/npm/echarts@4.7.0/dist/echarts.min.js"></script>
<!-- 基于准备好的dom，初始化 echarts 实例 -->
<script>
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
    title: {
        text: '月度统计'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        data: ["一月","二月","三月","四月","五月","六月"]
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: [100, 200, 300, 400, 500, 600]
    }]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>

通过以上代码，我们可以看到一个基础的柱状图表已经生成，包含标题、提示框、图例以及柱状图的 x 轴和 y 轴数据。我们可以通过修改配置项和数据来自定义自己的图表，如修改标题名、调整柱状图的宽度、更改柱状图颜色等。

高级图表展示

在基础图表展示的基础上，Echartsdemo 还提供了许多高级图表展示的效果，如饼状图、折线图、雷达图等。下面我们通过实战演示来了解如何绘制这些高级图表。

饼状图

饼状图是一种展示数据占比关系的图表，我们来看看通过 Echartsdemo 如何绘制一个饼状图：

<!-- 引入 Echartsdemo 库 -->
<script src="https://cdn.jsdelivr.net/npm/echarts@4.7.0/dist/echarts.min.js"></script>
<!-- 基于准备好的dom，初始化 echarts 实例 -->
<script>
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
    title: {
        text: '饼图演示',
        left: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br>{b}: {c} ({d}%)'
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: ['40%', '60%'],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '30',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: [
                {value: 335, name: '直接访问'},
                {value: 310, name: '邮件营销'},
                {value: 234, name: '联盟广告'},
                {value: 135, name: '视频广告'},
                {value: 1548, name: '搜索引擎'}
            ]
        }
    ]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>

在代码中，我们设置了饼状图的标题、提示框、图例和数据。通过 radius 属性可以设置饼状图的内径和外径，通过 emphasis 属性可以设置鼠标悬停时的效果。通过修改数据值和名称，我们可以自定义自己的饼状图。

折线图

折线图是一种反映数据变化趋势的图表，通过折线的起伏反映数据的波动情况。我们来看看通过 Echartsdemo 如何绘制一个折线图：

<!-- 引入 Echartsdemo 库 -->
<script src="https://cdn.jsdelivr.net/npm/echarts@4.7.0/dist/echarts.min.js"></script>
<!-- 基于准备好的dom，初始化 echarts 实例 -->
<script>
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
    title: {
        text: '折线图演示'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['周一','周二','周三','周四','周五','周六','周日']
    },
    yAxis: {
        type: 'value',
        axisLabel: {
            formatter: '{value} 次'
        }
    },
    series: [
        {
            name:'邮件营销',
            type:'line',
            data:[120, 132, 101, 134, 90, 230, 210]
        },
        {
            name:'联盟广告',
            type:'line',
            data:[220, 182, 191, 234, 290, 330, 310]
        },
        {
            name:'视频广告',
            type:'line',
            data:[150, 232, 201, 154, 190, 330, 410]
        },
        {
            name:'直接访问',
            type:'line',
            data:[320, 332, 301, 334, 390, 330, 320]
        },
        {
            name:'搜索引擎',
            type:'line',
            data:[820, 932, 901, 934, 1290, 1330, 1320]
        }
    ]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>

在代码中，我们设置了折线图的标题、提示框、图例和数据。通过 xAxis 和 yAxis 属性可以设置折线图的横坐标和纵坐标。通过 series 属性可以设置折线的名称和数据值。通过调整数据值和名称，我们可以生成自己的折线图。

总结

综上所述，Echartsdemo 是一款功能强大、使用方便的数据可视化图表库，可应用于多种应用场景。通过本文实战演示，我们深入了解了 Echartsdemo 的基础图表绘制和高级图表展示的方法，并且掌握了如何自定义自己的图表。相信通过不断练习和实践，我们可以运用 Echartsdemo 绘制出更加精美、多样的图表。

推荐文章