新手Echarts问题:为什么官网有些案例无法直接调用?

因为工作需要,公司最近需要我们去调用一下echarts。

因为以前没有用过echarts,只好先去学习一下。

今天在测试echarts时却发现了一个问题:

官网发的大部分案例都可以直接复制执行,还有一些是需要json文件的暂且不论。

今天测试的这个,我看过代码没有调用json文件的记录,却还是显示一片空白。

echarts环境:echarts用的是官网的2.08M的源码包,浏览器是 firfox.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
<script src="echarts.js"></script>
</head>
<body>
<div id="charts" style="position: absolute;width: 80%;height: 80%;">

</div>
</body>
<script>
    var charts=echarts.init(document.getElementById('charts'));

//为了代码可读性,我把系统给的数据全部以 data 代替
var data0 = [ data ];

var data = [ data ];

// See https://github.com/ecomfe/echarts-stat
var myRegression = ecStat.regression('logarithmic', data);

myRegression.points.sort(function(a, b) {
    return a[0] - b[0];
});

option = {
    legend: {
        data: ['1990', '2015'],
        bottom: 20
    },
    title: {
        text: '1990 and 2015 per capita life expectancy and GDP',
        subtext: 'By ecStat.regression',
        sublink: 'https://github.com/ecomfe/echarts-stat',
        left: 'center'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross'
        }
    },
    grid: {
        top: 80,
        bottom: 90
    },
    xAxis: {
        type: 'value',
        splitLine: {
            lineStyle: {
                type: 'dashed'
            }
        },
    },
    yAxis: {
        type: 'value',
        splitLine: {
            lineStyle: {
                type: 'dashed'
            }
        },
    },
    series: [{
        name: '1990',
        type: 'scatter',
        symbolSize: function(data) {
            return Math.sqrt(data[2]) / 5e2;
        },
        label: {
            emphasis: {
                show: true,
                formatter: function(param) {
                    return param.data[3];
                },
                position: 'top'
            }
        },
        itemStyle: {
            normal: {
                shadowBlur: 10,
                shadowColor: 'rgba(120, 36, 50, 0.5)',
                shadowOffsetY: 5,
                color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
                    offset: 0,
                    color: 'rgb(251, 118, 123)'
                }, {
                    offset: 1,
                    color: 'rgb(204, 46, 72)'
                }])
            }
        },
        data: data0
    }, {
        name: '2015',
        type: 'scatter',
        symbolSize: function(data) {
            return Math.sqrt(data[2]) / 5e2;
        },
        label: {
            emphasis: {
                show: true,
                formatter: function(param) {
                    return param.data[3];
                },
                position: 'top'
            }
        },
        itemStyle: {
            normal: {
                shadowBlur: 10,
                shadowColor: 'rgba(25, 100, 150, 0.5)',
                shadowOffsetY: 5,
                color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
                    offset: 0,
                    color: 'rgb(129, 227, 238)'
                }, {
                    offset: 1,
                    color: 'rgb(25, 183, 207)'
                }])
            }
        },
        data: data1
    }, {
        name: 'line',
        type: 'line',
        lineStyle: {
            normal: {
                color: '#2f4554'
            }
        },
        smooth: true,
        showSymbol: false,
        data: myRegression.points,
        markPoint: {
            itemStyle: {
                normal: {
                    color: 'transparent'
                }
            },
            label: {
                normal: {
                    show: true,
                    position: 'left',
                    formatter: myRegression.expression,
                    textStyle: {
                        color: '#333',
                        fontSize: 14
                    }
                }
            },
            data: [{
                coord: myRegression.points[myRegression.points.length - 1]
            }]
        }
    }]
};
    charts.setOption(option);
</script>
</html>

如果我数据的修改影响了判断,这里是源码--->Echarts代码源码

4个回答

echarts.js放在哪里了,是本地运行的么?firefox什么版本,换chrome试试看呢

weixin_42693699
枭筱龙 echarts.js和实例在同一个目录底下,firfox是最新版本,Chrome试过了,不可以,也是一片空白。。
一年多之前 回复

应该是echarts版本不对,你换下别的版本看下

https://gallery.echartsjs.com/help.html
你到官方贴下代码试试

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐