废话不多说,直接整
首先大家要先查看我们echarts官网库里的图形所对应的数据格式,网址:http://echarts.baidu.com/examples/editor.html?c=line-simple
上图:ASP.NET MVC 如何接Echarts图表
也就是说我们要是格式是这种的:

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包,引用(哪里都能下载)
接下来看代码:
ASP.NET MVC 如何接Echarts图表
贴主要代码:

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,完成,看结果
ASP.NET MVC 如何接Echarts图表

相关文章:

  • 2021-12-16
  • 2022-02-16
  • 2022-12-23
  • 2021-06-03
  • 2021-09-19
  • 2022-12-23
猜你喜欢
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-11-04
  • 2022-12-23
  • 2021-06-09
  • 2021-10-04
相关资源
相似解决方案