echarts 现在报错ECharts is not Loaded
echarts里面地图引用china.js老报错
ECharts is not Loaded
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="main" style="width: 1280px;height:720px;"></div>
<script src="js/china.js"></script>
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var name_title = "微博评论热力图"
var mapName = 'china'
var data = [
{ name: '广东', value: 278 },
{ name: '江苏', value: 170 },
{ name: '山东', value: 100 },
{ name: '浙江', value: 133 },
{ name: '河南', value: 67 },
{ name: '四川', value: 108 },
{ name: '湖北', value: 75 },
{ name: '湖南', value: 53 },
{ name: '河北', value: 69 },
{ name: '福建', value: 56 },
{ name: '上海', value: 138 },
{ name: '北京', value: 161 },
{ name: '安徽', value: 48 },
{ name: '辽宁', value: 59 },
{ name: '陕西', value: 69 },
{ name: '江西', value: 26 },
{ name: '重庆', value: 36 },
{ name: '广西', value: 61 },
{ name: '天津', value: 32 },
{ name: '云南', value: 15 },
{ name: '内蒙古', value: 11 },
{ name: '山西', value: 33 },
{ name: '黑龙江', value: 21 },
{ name: '吉林', value: 10 },
{ name: '贵州', value: 11 },
{ name: '新疆', value: 12 },
{ name: '甘肃', value: 15 },
{ name: '海南', value: 12 },
{ name: '宁夏', value: 9 },
{ name: '青海', value: 5 },
{ name: '西藏', value: 0 }
];
var option = {
title: {
text: name_title,
x: 'center',
textStyle: {
fontSize: 24
},
},
tooltip: {
trigger: 'item',
formatter: function (params) {
var toolTiphtml = ''
if (isNaN(params.value)) {
toolTiphtml = params.name + '评论数'
} else {
toolTiphtml = params.name + params.value + '评论数'
}
//console.log(toolTiphtml)
return toolTiphtml;
}
},
toolbox: {
feature: {
saveAsImage: {}
}
},
visualMap: {
show: true,
left: 'left',
top: 'bottom',
seriesIndex: [0],
type: 'piecewise',
pieces: [
{ min: 201, color: 'rgb(254,57,101)' },
{ min: 101, max: 200, color: 'rgb(252,157,154)' },
{ min: 51, max: 100, color: 'rgb(249,205,173)' },
{ min: 11, max: 50, color: 'rgb(200,200,169)' },
{ min: 0, max: 10, color: 'rgb(131,175,155)' },
],
textStyle: {
color: '#000000'
}
},
geo: {
show: true,
map: mapName,
label: {
normal: {
show: true,
fontSize: 12,
},
emphasis: {
show: false,
}
},
roam: false,
itemStyle: {
normal: {
areaColor: '#FFFFFF',
borderColor: '#666666',
},
emphasis: {
areaColor: '#0099CC',
}
}
},
series: [
{
type: 'map',
map: mapName,
geoIndex: 0,
animation: false,
data: data
},
]
};
myChart.setOption(option);
</script>
</body>
</html>
或者有啥能用的china.js的包嘛
你把china.js放到echarts.min.js下面执行呢
- 你可以看下这个问题的回答https://ask.csdn.net/questions/7636807
- 这篇博客你也可以参考下：vue中下载echarts包，引入china.js文件后,报错'ECharts is not Loaded'
- 除此之外, 这篇博客: 数据可视化之Echarts中的 Echarts.js库 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
echarts.js作为国内的IT三巨头之一的百度的推出一款相对较为成功的开源项目，
总体上来说有这样的一些优点1、echarts.js容易使用 echarts.js的官方文档比较详细，而且官网中提供大量的使用示例供大家使用 2、echarts.js支持按需求打包 echarts.js官网提供了在线构建的工具，可以在线构建项目时 选择项目所需要使用到的模块，从而达到减小JS文件的体积 3、echarts.js开源 4、支持中国地图功能echarts.js的缺点
1、echarts.js的体积较大 一个基础的echarts.js都要400K左右，相对于D3.js和hightcharts.js来说都是比较大的 2、echarts.js的可定制性差 说到echarts.js的定制性差，其实不止是包括echarts.js，hightcharts.js也是如此， 因为这一类型的数据可视化框架主要是高度的进行分装， 所以你在使用的时候只需要设置一下配置就可以了， 但是如果是出现了要绘制配置中不支持的图表怎么办，那么你就只能放弃，尝试着使用其他的框架了 总的来说:从大的方向上面来看，echarts.js还是值得去了解学习使用的， 因为echarts.js得到了百度团队的重视，在git上面的更新也是比较的频繁， 所以不会出现一些比较严重的bug之类的，最后这款框架一点就是框架的配置文件相当的详细， 但是交互API文档虽然有说明，但是还是没有示例来举证，这个可能就是我认为的一个不足之处吧- 您还可以看一下 张丽丽老师的Echarts-0基础入门课程中的 Echarts 坐标轴小节, 巩固相关知识点