weixin_42693699
枭筱龙
采纳率71.4%
2019-01-08 18:00 阅读 1.7k

新手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条回答 默认 最新

  • caozhy 从今以后生命中的每一秒都属于我爱的人 2019-01-09 00:00

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

    点赞 评论 复制链接分享
  • qq_37129624 ghq-yes 2019-01-09 09:48

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

    点赞 评论 复制链接分享
  • weixin_39416561 lyhsdy 2019-01-09 10:05

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

    点赞 评论 复制链接分享
  • Chris__wang ChrisWang_ 2019-01-09 18:40
    点赞 评论 复制链接分享

相关推荐