Echarts的简单使用

最新推荐文章于 2023-03-07 15:58:41 发布

s_daqing

最新推荐文章于 2023-03-07 15:58:41 发布

阅读量273

点赞数

分类专栏：使用操作教程文章标签： Echars

本文链接：https://blog.csdn.net/s_daqing/article/details/101198329

版权

使用操作教程专栏收录该内容

3 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <script src="./jquery-3.4.1.js"></script>
    <!-- 引入 echarts.js -->
    <script src="incubator-echarts-master/dist/echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
		// 此处可以异步获得后端传过来的数据之后，进行渲染到ECharts中
        $.get('127.0.0.1:8000/clothes').done(function (data) {
            myChart.setOption({
                title: {
                    text: '异步数据加载示例'
                },
                tooltip: {},
                legend: {
                    data:['销量']
                },
                xAxis: {
                    data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                },
                yAxis: {},
                series: [{
                    name: '销量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                }]
            });
        });

    </script>
</body>
</html>

在这里插入图片描述
官网实例

另一种写法：先填空值，请求之后再填充

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <script src="./jquery-3.4.1.js"></script>
    <!-- 引入 echarts.js -->
    <script src="incubator-echarts-master/dist/echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        // 显示标题，图例和空的坐标轴
        myChart.setOption({
            title: {
                text: '异步数据加载示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: []
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: []
            }]
        });

        // 异步加载数据
        $.get('http://127.0.0.1:8000/clothes/').done(function (data) {
            // alert(data.series_type)
            console.log(data.series_data)
            // 填入数据
            myChart.setOption({
                xAxis: {
                    data: data.xAxis
                },
                series: [{
                    // 根据名字对应到相应的系列
                    name: '销量',
                    data: data.series_data
                }]
            });
        });

    </script>
</body>
</html>

以上写法有可能前端接收到data数据后，取数据中的数据会是undefind，有如下两种修改方式
第一种方案：前端修改代码，ajax不使用这种简写的方式
不使用ajax简写方式的代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <script src="./jquery-3.4.1.js"></script>
    <!-- 引入 echarts.js -->
    <script src="incubator-echarts-master/dist/echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));


        $.ajax({
            url: 'http://127.0.0.1:8000/clothes/',
            type: 'GET',
            dataType: 'json',
            // data:{'code':300268}
        })
        .done(function(data) {
            console.log(data)
            myChart.setOption({
                title: {
                    // text: '异步数据加载示例'
                    text: data.title_text
                },
                tooltip: {},
                legend: {
                    // data:['销量']
                    data: data.legend_data
                },
                xAxis: {
                    // data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                    data: data.xAxis
                },
                yAxis: {},
                series: [{
                    // name: '销量',
                    // type: 'bar',
                    // data: [5, 20, 36, 10, 10, 20]
                    name: data.series_name,
                    type: data.series_type,
                    data: data.series_data
                }]
            });
        })
        .fail(function() {
            alert('服务器超时，请重试！');
        });

    </script>
</body>
</html>

第二种方案：后端修改
后端我是用的django，在向前端返回数据的时候，这样返回：
修改之前的返回方式

return HttpResponse(json.dumps(data))

也有可能你使用的是这种返回

return JsonResponse(data)

尽量使用如下HttpResponse这种返回形式，因为JsonResponse在返回中文的时候有可能乱码
修改之后的返回方式：

return HttpResponse(json.dumps(data, ensure_ascii=False), content_type="application/json,charset=utf-8")

s_daqing

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录