使用Echarts展示图表数据的新方法

一、Echarts简介

Echarts是一个基于JavaScript的数据可视化库，可以制作各种类型的图表，比如折线图、柱状图、饼图等。它非常易于使用，支持大量的图表类型和选项设置。Echarts提供了丰富的交互方式，轻松的支持控件、图例、标签等。Echarts的图表非常精美，支持分类轴、时间轴、值域轴等多种类型的轴。

在Echarts中，图表是通过JavaScript代码来创建的，可以自定义各种选项。Echarts采用模块化设计，用户可以非常灵活地组合各种组件、配置文件和数据来实现需要的图表。同时，Echarts的官方文档非常齐全，用户可以轻松地找到需要的解决方案。

二、Echarts的基本用法

Echarts使用起来非常方便，首先需要在HTML文件中引入Echarts的JavaScript文件。

<script src="echarts.js"></script>

然后，在JavaScript代码中创建Echarts实例，并设置需要展示的数据和配置项。

// 初始化Echarts实例
var myChart = echarts.init(document.getElementById('chart'));

// 设置数据和配置项
var option = {
    title: {
        text: '某地区的销售情况'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
};

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

在以上示例中，我们创建了一个柱状图，使用了Echarts提供的基本配置项和数据。其中，xAxis表示x轴，yAxis表示y轴，series表示系列。Echarts还提供了其他更高级的选项，比如grid、toolbox和dataZoom等。可以根据需要自定义配置选项来制作更多样化的图表。

三、实例展示

下面包含三个实例展示，分别是折线图、饼图和地图。

折线图

折线图常用于展示随时间变化的数据趋势。以下代码展示了如何制作一个折线图。

<div id="line-chart" style="width: 700px;height:400px;"></div>

<script>
var lineChart = echarts.init(document.getElementById('line-chart'));

var option = {
    title: {
        text: '产品销量'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data:['销量']
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
    },
    yAxis: {
        type: 'value',
        axisLabel: {
            formatter: '{value} 件'
        }
    },
    series: [
        {
            name:'销量',
            type:'line',
            data:[120, 132, 101, 134, 90, 230, 210, 200, 150, 110, 90, 200],
            itemStyle: {color: '#5ab1ef'},
            lineStyle: {color: '#5ab1ef'}
        }
    ]
};

lineChart.setOption(option);
</script>

以上代码展示了一个折线图，使用了Echarts提供的基本配置项和数据。其中，xAxis表示x轴，yAxis表示y轴，series表示系列。折线图中的每条线通过series配置中的type项来指定，这里我们制作了一条线。Echarts还提供了其他更多样化的选项，可以根据需要自定义配置选项来制作更多样化的图表。

饼图

饼图常用于展示数据的占比。以下代码展示了如何制作一个饼图。

<div id="pie-chart" style="width: 700px;height:400px;"></div>

<script>
var pieChart = echarts.init(document.getElementById('pie-chart'));

var option = {
    title: {
        text: '产品销售占比',
        subtext: '2021年第一季度',
        x: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['iphone12','小米11','华为P40','OPPO Reno5','vivo X60']
    },
    series: [
        {
            name: '销售占比',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data:[
                {value:335, name:'iphone12'},
                {value:310, name:'小米11'},
                {value:234, name:'华为P40'},
                {value:135, name:'OPPO Reno5'},
                {value:1548, name:'vivo X60'}
            ],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

pieChart.setOption(option);
</script>

以上代码展示了一个饼图，使用了Echarts提供的基本配置项和数据。其中，series表示系列，这里我们制作了一个饼图系列。Echarts还提供了其他更多样化的选项，可以根据需要自定义配置选项来制作更多样化的图表。

地图

地图常用于展示地理信息。以下代码展示了如何制作一个地图。

<div id="map-chart" style="width: 700px;height:400px;"></div>

<script>
var mapChart = echarts.init(document.getElementById('map-chart'));

var option = {
    title: {
        text: '中国各省份销售额',
        subtext: '2021年第一季度',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 1500,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    series: [
        {
            name: '销售额',
            type: 'map',
            mapType: 'china',
            roam: false,
            data:[
                {name: '北京', value: Math.round(Math.random()*1000)},
                {name: '天津', value: Math.round(Math.random()*1000)},
                {name: '上海', value: Math.round(Math.random()*1000)},
                {name: '重庆', value: Math.round(Math.random()*1000)},
                {name: '河北', value: Math.round(Math.random()*1000)},
                {name: '河南', value: Math.round(Math.random()*1000)},
                {name: '云南', value: Math.round(Math.random()*1000)},
                {name: '辽宁', value: Math.round(Math.random()*1000)},
                {name: '黑龙江', value: Math.round(Math.random()*1000)},
                {name: '湖南', value: Math.round(Math.random()*1000)},
                {name: '安徽', value: Math.round(Math.random()*1000)},
                {name: '山东', value: Math.round(Math.random()*1000)},
                {name: '新疆', value: Math.round(Math.random()*1000)},
                {name: '江苏', value: Math.round(Math.random()*1000)},
                {name: '浙江', value: Math.round(Math.random()*1000)},
                {name: '江西', value: Math.round(Math.random()*1000)},
                {name: '湖北', value: Math.round(Math.random()*1000)},
                {name: '广西', value: Math.round(Math.random()*1000)},
                {name: '甘肃', value: Math.round(Math.random()*1000)},
                {name: '山西', value: Math.round(Math.random()*1000)},
                {name: '内蒙古', value: Math.round(Math.random()*1000)},
                {name: '陕西', value: Math.round(Math.random()*1000)},
                {name: '吉林', value: Math.round(Math.random()*1000)},
                {name: '福建', value: Math.round(Math.random()*1000)},
                {name: '贵州', value: Math.round(Math.random()*1000)},
                {name: '广东', value: Math.round(Math.random()*1000)},
                {name: '青海', value: Math.round(Math.random()*1000)},
                {name: '西藏', value: Math.round(Math.random()*1000)},
                {name: '四川', value: Math.round(Math.random()*1000)},
                {name: '宁夏', value: Math.round(Math.random()*1000)},
                {name: '海南', value: Math.round(Math.random()*1000)},
                {name: '台湾', value: Math.round(Math.random()*1000)},
                {name: '香港', value: Math.round(Math.random()*1000)},
                {name: '澳门', value: Math.round(Math.random()*1000)}
            ],
            emphasis: {
                label: {
                    show: true
                }
            }
        }
    ]
};

mapChart.setOption(option);
</script>

以上代码展示了一个地图，使用了Echarts提供的基本配置项和数据。其中，visualMap表示视觉映射，使用了最小值和最大值对数据进行映射，并且设置了文本和是否可计算选项。series表示系列，这里我们制作了一个地图系列。Echarts还提供了其他更多样化的选项，可以根据需要自定义配置选项来制作更多样化的图表。