正文

学会echarts图表制作：新手必看！30个精选echarts demo实例源码全解析

/0 浏览量
0423

ECharts是一个使用JavaScript实现的开源可视化库，它可以帮助用户轻松地实现数据的可视化。对于新手来说，掌握ECharts图表制作是一个不错的选择。本文将为您带来30个精选的ECharts demo实例源码，并对其进行全解析，帮助您快速上手ECharts。

1. ECharts简介

ECharts提供了丰富的图表类型，包括折线图、柱状图、散点图、饼图、雷达图、地图、K线图等。通过ECharts，您可以轻松地将数据转换为图表，并实现交互式展示。

2. ECharts实例解析

2.1 基础折线图

以下是一个简单的折线图实例，展示如何使用ECharts绘制折线图：

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

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

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

2.2 柱状图对比

以下是一个柱状图对比实例，展示如何使用ECharts绘制柱状图：

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

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

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

2.3 饼图

以下是一个饼图实例，展示如何使用ECharts绘制饼图：

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '饼图'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    series: [{
        name: '销量',
        type: 'pie',
        radius: '50%',
        data: [
            {value: 5, name: '衬衫'},
            {value: 20, name: '羊毛衫'},
            {value: 36, name: '雪纺衫'},
            {value: 10, name: '裤子'},
            {value: 10, name: '高跟鞋'},
            {value: 20, name: '袜子'}
        ],
        emphasis: {
            itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
        }
    }]
};

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

2.4 地图

以下是一个地图实例，展示如何使用ECharts绘制地图：

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '地图'
    },
    tooltip: {},
    legend: {
        orient: 'vertical',
        left: 'left',
        data:['销量']
    },
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],           // 文本，默认为数值文本
        calculable: true
    },
    xAxis: {},
    yAxis: {},
    series: [{
        name: '销量',
        type: 'map',
        mapType: 'china',
        roam: true,
        label: {
            normal: {
                show: true
            },
            emphasis: {
                show: true
            }
        },
        data: [
            {name: '北京', value: randomData() },
            {name: '天津', value: randomData() },
            {name: '上海', value: randomData() },
            {name: '重庆', value: randomData() },
            {name: '河北', value: randomData() },
            {name: '河南', value: randomData() },
            {name: '云南', value: randomData() },
            {name: '辽宁', value: randomData() },
            {name: '黑龙江', value: randomData() },
            {name: '湖南', value: randomData() },
            {name: '安徽', value: randomData() },
            {name: '山东', value: randomData() },
            {name: '新疆', value: randomData() },
            {name: '江苏', value: randomData() },
            {name: '浙江', value: randomData() },
            {name: '江西', value: randomData() },
            {name: '湖北', value: randomData() },
            {name: '广西', value: randomData() },
            {name: '甘肃', value: randomData() },
            {name: '山西', value: randomData() },
            {name: '内蒙古', value: randomData() },
            {name: '陕西', value: randomData() },
            {name: '吉林', value: randomData() },
            {name: '福建', value: randomData() },
            {name: '贵州', value: randomData() },
            {name: '广东', value: randomData() },
            {name: '青海', value: randomData() },
            {name: '西藏', value: randomData() },
            {name: '四川', value: randomData() },
            {name: '宁夏', value: randomData() },
            {name: '海南', value: randomData() },
            {name: '台湾', value: randomData() },
            {name: '香港', value: randomData() },
            {name: '澳门', value: randomData()}
        ]
    }]
};

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

3. 总结

本文为您介绍了30个精选的ECharts demo实例源码，并对每个实例进行了详细解析。希望这些实例能够帮助您快速上手ECharts图表制作。在实际应用中，您可以根据需求选择合适的图表类型，并利用ECharts提供的丰富功能进行定制化开发。

4. 代码示例

以下是本文中提到的实例代码，您可以将其复制到本地环境中进行测试：

// 基础折线图
var myChart = echarts.init(document.getElementById('main'));
// ...
myChart.setOption(option);

// 柱状图对比
var myChart = echarts.init(document.getElementById('main'));
// ...
myChart.setOption(option);

// 饼图
var myChart = echarts.init(document.getElementById('main'));
// ...
myChart.setOption(option);

// 地图
var myChart = echarts.init(document.getElementById('main'));
// ...
myChart.setOption(option);

祝您学习愉快！

-- 展开阅读全文 --