ASP.NET MVC 如何接Echarts图表

最新推荐文章于 2024-03-20 14:12:55 发布

记录成长

最新推荐文章于 2024-03-20 14:12:55 发布

阅读量3.2k

点赞数

分类专栏：记录文章标签： echarts

本文链接：https://blog.youkuaiyun.com/weixin_41282455/article/details/83544790

版权

记录专栏收录该内容

12 篇文章

订阅专栏

本文详细介绍如何将后端数据转换为ECharts图表所需的数据格式，包括x轴、y轴和系列数据的处理方法，以及如何设置图表选项并展示结果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

废话不多说，直接整
首先大家要先查看我们echarts官网库里的图形所对应的数据格式，网址：http://echarts.baidu.com/examples/editor.html?c=line-simple
上图：在这里插入图片描述
也就是说我们要是格式是这种的：

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    }]
};

简单！我们只需要通过后端传过来的数据处理成这种格式就达到我们的要求了
首先：我们导入echarts.min.js包，引用（哪里都能下载）
接下来看代码：
在这里插入图片描述
贴主要代码：

var option = {
                    title: {
                        text: obj2.title
                    },
                    tooltip: {},
                    legend: {
                        data: [obj2.legend]
                    },
                    xAxis: {
                        data: obj2.xAxis
                    },
                    yAxis: {},
                    series: [{
                        name: obj2.legend,
                        type: 'line',
                        data: obj2.series
                    }]
                };
                myChart.setOption(option);

上面的操作只是把后端处理的数据处理成echarts图官网要求的数据格式，然后执行myChart.setOption(option);

ok，完成，看结果
在这里插入图片描述