ajax动态赋值echarts的实例(饼图和柱形图)

我将详细讲解“ajax动态赋值echarts的实例(饼图和柱形图)”的完整攻略。以下是具体步骤：

准备工作

1. 在HTML文件中引入ECharts的JS文件和相应的主题文件

<!-- 引入ECharts插件的JS库 -->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.6.0/echarts.min.js"></script>

<!-- 引入ECharts主题文件的JS库 -->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.6.0/theme/macarons.min.js"></script>

1. 准备HTML页面的结构，包含ECharts容器

<!-- 定义ECharts容器 -->
<div id="chart" style="width: 600px;height:500px;"></div>

实现动态赋值ECharts

1. 通过ajax获取需要的数据

$.ajax({
    url: 'data.json',
    dataType: 'json',
    success: function (data) {
        // 数据获取成功后，进行动态设置ECharts数据
    }
});

1. 在success回调函数中，动态设置ECharts数据

饼图

// 获取ECharts对象
var myChart = echarts.init(document.getElementById('chart'), 'macarons');

// 设置饼图的参数
option = {
    title : {
        text: '饼图示例',
        subtext: '数据仅供参考',
        x:'center'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        x : 'center',
        y : 'bottom',
        data:[]
    },
    series : [
        {
            name: '数据来源',
            type: 'pie',
            radius : '55%',
            center: ['50%', '50%'],
            data:[],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

// 将ajax返回的数据设置到饼图中
option.series[0].data = data.data; // data为ajax返回的数据

// 将Ajax返回的分类数据设置到饼图的legend中
option.legend.data = data.category; // category为ajax返回的分类数据

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

柱形图

// 获取ECharts对象
var myChart = echarts.init(document.getElementById('chart'), 'macarons');

// 设置柱形图的参数
option = {
    title: {
        text: '柱形图示例',
        subtext: '数据仅供参考',
        x: 'center'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data:[]
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        data: [],
        axisLabel:{
            interval:0,
            rotate:-45
        }
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [],
        type: 'bar'
    }]
};

// 将ajax返回的数据设置到柱形图中
option.xAxis.data = data.category; // category为ajax返回的分类数据
option.series[0].data = data.data; // data为ajax返回的数据

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

示例说明

以下是两个示例，一个是从本地data.json文件动态获取数据并赋值到饼图中，另一个是从远程服务器获取数据并赋值到柱形图中。

示例1：动态赋值饼图

// 获取ECharts对象
var myChart = echarts.init(document.getElementById('chart'), 'macarons');

// 通过ajax获取数据
$.ajax({
    url: 'data.json', // data.json为本地文件路径
    dataType: 'json',
    success: function (data) {
        // 设置饼图的参数
        option = {
            title : {
                text: '饼图示例',
                subtext: '数据仅供参考',
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                x : 'center',
                y : 'bottom',
                data:[]
            },
            series : [
                {
                    name: '数据来源',
                    type: 'pie',
                    radius : '55%',
                    center: ['50%', '50%'],
                    data:[],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

        // 将ajax返回的数据设置到饼图中
        option.series[0].data = data.data; // data为ajax返回的数据

        // 将Ajax返回的分类数据设置到饼图的legend中
        option.legend.data = data.category; // category为ajax返回的分类数据

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

示例2：动态赋值柱形图

// 获取ECharts对象
var myChart = echarts.init(document.getElementById('chart'), 'macarons');

// 通过ajax获取数据
$.ajax({
    url: 'http://example.com/data.json', // data.json为远程文件路径
    dataType: 'json',
    success: function (data) {
        // 设置柱形图的参数
        option = {
            title: {
                text: '柱形图示例',
                subtext: '数据仅供参考',
                x: 'center'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data:[]
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                data: [],
                axisLabel:{
                    interval:0,
                    rotate:-45
                }
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [],
                type: 'bar'
            }]
        };

        // 将ajax返回的数据设置到柱形图中
        option.xAxis.data = data.category; // category为ajax返回的分类数据
        option.series[0].data = data.data; // data为ajax返回的数据

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

以上就是使用ajax动态赋值echarts的实例攻略，希望能对你有所帮助！

阅读剩余 80%