echarts读取json文件在网页展示

echarts读取json文件在网页展示

1.首先创建json文件，右键项目名-添加-新建项-json文件
json.json
{
“categories”: [
“衬衫”,
“羊毛衫”,
“手套”,
“鞋子”,
“毛巾”
],
“data”: [
5,
13,
21,
24,
9
]
}

2.在html文件中需要引入jquery，echarts的js文件，还有要读取的json文件，加在head标签里
具体路径新版的visual studio都有提示

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

3.创建图表并读取

<div id="main" style="height:400px;width:600px"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        myChart.setOption({                   //新建一个新图表
            title: { text: '异步加载数据' },
            tooltip: {},
            lengd: { data: ['销量'] },
            xAxis: { data: [] },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'line',
                data: []
            }]
        });

        $.get('json.json').done(function (data) {  //读取json文件
            myChart.setOption({
                xAxis: {
                    data:data.categories
                },
                series: {
                    data:data.data
                }
            })
        })
    </script>

4.到第三步其实已经完成了，但会遇到json数据乱码的问题，这就要用到notepad++，打开json文件，选编码-转变为utf-8编码，再保存。这时vs会提示json文件已更改，重新加载一下就行了。
大功告成~

参考文章：https://blog.csdn.net/sinat_34234837/article/details/90203899