echarts 散点图散点图点可以给点坐标标识不同的名称吗

浏览器不支持嵌入式框架,或被配置为不显示嵌入式框架。echarts标准(散点图)泡泡图的实现例子-js教程-网页制作-壹聚教程网echarts标准(散点图)泡泡图的实现例子
echarts标准(散点图)泡泡图的实现方法也没什么困难了,但如果真要做了细节还是需要一些时间了的哦,下面我来介绍echarts 散点图的实现方法吧。
1、定义报表的html控件
&div id=&main& class=&main&&&/div&
2、引用js:
&script src=&../asset/js/esl/esl.js&&&/script&
&&script src=&../asset/js/.min.js&&&/script&
3、调用模块化加载echarts:
var domCode = document.getElementById('sidebar-code');
var domGraphic = document.getElementById('graphic');
var domMain = document.getElementById('main');
var domMessage = document.getElementById('wrong-message');
var iconResize = document.getElementById('icon-resize');
var needRefresh =
var hash = location.hash.replace('#','') || (needMap() ? 'default' : 'macarons');
function requireCallback (ec, defaultTheme) {
curTheme = themeSelector
&? defaultTheme
&: {};echarts =
refresh();
window.onresize = myChart.
var themeSelector = $('#theme-')[0];
if (themeSelector) {
themeSelector.innerHTML =
'&option selected=&true& name=&macarons&&macarons&/option&'
+ '&option name=&infographic&&infographic&/option&'
+ '&option name=&shine&&shine&/option&'
+ '&option name=&dark&&dark&/option&'
+ '&option name=&blue&&blue&/option&'
+ '&option name=&green&&green&/option&'
+ '&option name=&red&&red&/option&'
+ '&option name=&gray&&gray&/option&'
+ '&option name=&default&&default&/option&';
$(themeSelector).on('change', function(){
selectChange($(this).val());
function selectChange(value){
var theme =
myChart.showLoading();
$(themeSelector).val(theme);
if (theme != 'default') {
window.location.hash =
require(['theme/' + theme], function(tarTheme){
curTheme = tarT
setTimeout(refreshTheme, 500);
window.location.hash = '';
curTheme = {};
setTimeout(refreshTheme, 500);
function refreshTheme(){
myChart.hideLoading();
myChart.setTheme(curTheme);
if ($(themeSelector).val(hash).val() != hash) {
$(themeSelector).val('macarons');
hash = 'macarons';
window.location.hash =
function autoResize() {
if ($(iconResize).hasClass('glyphicon-resize-full')) {
focusCode();
iconResize.className = 'glyphicon glyphicon-resize-small';
focusGraphic();
iconResize.className = 'glyphicon glyphicon-resize-full';
function focusCode() {
domCode.className = 'col-md-8 ani';
domGraphic.className = 'col-md-4 ani';
function focusGraphic() {
domCode.className = 'col-md-4 ani';
domGraphic.className = 'col-md-8 ani';
if (needRefresh) {
myChart.showLoading();
setTimeout(refresh, 1000);
var editor = CodeMirror.fromTextArea(
document.getElementById(&code&),
{ lineNumbers: true }
editor.setOption(&theme&, 'monokai');
editor.on('change', function(){needRefresh =});
function refresh(isBtnRefresh){
if (isBtnRefresh) {
needRefresh =
focusGraphic();
needRefresh =
if (myChart && myChart.dispose) {
myChart.dispose();
myChart = echarts.init(domMain, curTheme);
window.onresize = myChart.
(new Function(editor.doc.getValue()))();
myChart.setOption(option, true)
domMessage.innerHTML = '';
function needMap() {
var href = location.
return href.indexOf('map') != -1
&|| href.indexOf('mix3') != -1
&|| href.indexOf('mix5') != -1
&|| href.indexOf('dataRange') != -1;
var developMode =
if (developMode) {
// for develop
require.config({
packages: [
name: 'echarts',
location: '../../src',
main: 'echarts'
name: 'zrender',
//location: 'http://ecomfe.github.io/zrender/src',
location: '../../../zrender/src',
main: 'zrender'
// for echarts online home page
var fileLocation = needMap() ? './www/js/echarts-map' : './www/js/echarts';
require.config({
echarts: fileLocation,
'echarts/chart/line': fileLocation,
'echarts/chart/bar': fileLocation,
'echarts/chart/scatter': fileLocation,
'echarts/chart/k': fileLocation,
'echarts/chart/pie': fileLocation,
'echarts/chart/radar': fileLocation,
'echarts/chart/map': fileLocation,
'echarts/chart/chord': fileLocation,
'echarts/chart/force': fileLocation,
'echarts/chart/gauge': fileLocation,
'echarts/chart/funnel': fileLocation
// ??????杞?br />
'echarts',
'theme/' + hash,
'echarts/chart/line',
'echarts/chart/bar',
'echarts/chart/scatter',
'echarts/chart/k',
'echarts/chart/pie',
'echarts/chart/radar',
'echarts/chart/force',
'echarts/chart/chord',
'echarts/chart/gauge',
'echarts/chart/funnel',
needMap() ? 'echarts/chart/map' : 'echarts'
requireCallback
上面的代码是官方的测试代码。
上一页: &&&&&下一页:相关内容你好,想跟你请教个问题:echarts的散点图原点坐标能不能自己定义,比如定位成 (57,63),非常希望得到帮助!
您好 请问后来有没有解决方法?
没有找到真正自定义原点坐标的方法
后来的解决方法是在 x y 轴分别减去对应的坐标值,然后显示的时候 再加回来
好的 太感谢了

我要回帖

更多关于 echarts 散点图 的文章

 

随机推荐