Skip to content

Commit

Permalink
refact: upgrade to echarts 5.0 #106
Browse files Browse the repository at this point in the history
  • Loading branch information
@pissang
pissang committed Jan 7, 2021
1 parent f3f81fd commit cdf8c77
Show file tree
Hide file tree
Showing 9 changed files with 92 additions and 92 deletions.
4 changes: 2 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,8 @@ npm install echarts-wordcloud
```

```js
var echarts = require('echarts');
require('echarts-wordcloud');
import * as echarts from 'echarts'
import 'echarts-wordcloud';
```

## Usage
Expand Down
24 changes: 13 additions & 11 deletions example/optionKeywords.html
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
<html>
<head>
<meta charset="utf-8">
<script src='https://cdn.bootcss.com/echarts/3.7.2/echarts.simple.js'></script>
<script src='https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js'></script>

<!-- <script src="../../echarts/dist/echarts.js"></script> -->
<script src='../dist/echarts-wordcloud.js'></script>
</head>
<body>
Expand Down Expand Up @@ -377,16 +379,16 @@
maskImage: maskImage,
drawOutOfBound: false,
textStyle: {
normal: {
color: function () {
return 'rgb(' + [
Math.round(Math.random() * 160),
Math.round(Math.random() * 160),
Math.round(Math.random() * 160)
].join(',') + ')';
}
},
emphasis: {
color: function () {
return 'rgb(' + [
Math.round(Math.random() * 160),
Math.round(Math.random() * 160),
Math.round(Math.random() * 160)
].join(',') + ')';
}
},
emphasis: {
textStyle: {
color: 'red'
}
},
Expand Down
31 changes: 16 additions & 15 deletions example/wordCloud.html
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
<html>
<head>
<meta charset="utf-8">
<script src='https://cdn.bootcss.com/echarts/3.7.0/echarts.simple.js'></script>
<script src='https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js'></script>
<!-- <script src="../../echarts/dist/echarts.js"></script> -->
<script src='../dist/echarts-wordcloud.js'></script>
</head>
<body>
Expand All @@ -28,16 +29,16 @@
height: 400,
drawOutOfBound: true,
textStyle: {
normal: {
color: function () {
return 'rgb(' + [
Math.round(Math.random() * 160),
Math.round(Math.random() * 160),
Math.round(Math.random() * 160)
].join(',') + ')';
}
},
emphasis: {
color: function () {
return 'rgb(' + [
Math.round(Math.random() * 160),
Math.round(Math.random() * 160),
Math.round(Math.random() * 160)
].join(',') + ')';
}
},
emphasis: {
textStyle: {
shadowBlur: 10,
shadowColor: '#333'
}
Expand All @@ -47,10 +48,10 @@
name: 'Sam S Club',
value: 10000,
textStyle: {
normal: {
color: 'black'
},
emphasis: {
color: 'black'
},
emphasis: {
textStyle: {
color: 'red'
}
}
Expand Down
2 changes: 1 addition & 1 deletion index.js
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
module.exports = require('./src/wordCloud');
import './src/wordCloud';
19 changes: 12 additions & 7 deletions src/WordCloudSeries.js
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,26 @@
var completeDimensions = require('echarts/lib/data/helper/completeDimensions');
var echarts = require('echarts/lib/echarts');
import * as echarts from 'echarts/lib/echarts';

echarts.extendSeriesModel({

type: 'series.wordCloud',

visualColorAccessPath: 'textStyle.normal.color',
visualStyleAccessPath: 'textStyle',
visualStyleMapper: function (model) {
return {
fill: model.get('color')
};
},
visualDrawType: 'fill',

optionUpdated: function () {
var option = this.option;
option.gridSize = Math.max(Math.floor(option.gridSize), 4);
},

getInitialData: function (option, ecModel) {
var dimensions = completeDimensions(['value'], option.data);
var dimensions = echarts.helper.createDimensions(option.data, {
coordDimensions: ['value']
});
var list = new echarts.List(dimensions, this);
list.initData(option.data);
return list;
Expand Down Expand Up @@ -46,9 +53,7 @@ echarts.extendSeriesModel({
drawOutOfBound: false,

textStyle: {
normal: {
fontWeight: 'normal'
}
fontWeight: 'normal'
}
}
});
37 changes: 18 additions & 19 deletions src/WordCloudView.js
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,5 @@
var echarts = require('echarts/lib/echarts');

function getShallow(model, path) {
return model && model.getShallow(path);
}
import * as echarts from 'echarts/lib/echarts';
import {createTextStyle} from 'echarts/lib/label/labelStyle';

echarts.extendChartView({

Expand All @@ -18,34 +15,36 @@ echarts.extendChartView({

seriesModel.layoutInstance.ondraw = function (text, size, dataIdx, drawn) {
var itemModel = data.getItemModel(dataIdx);
var textStyleModel = itemModel.getModel('textStyle.normal');
var emphasisTextStyleModel = itemModel.getModel('textStyle.emphasis');
var textStyleModel = itemModel.getModel('textStyle');
var emphasisTextStyleModel = itemModel.getModel(['emphasis', 'textStyle']);

var textEl = new echarts.graphic.Text({
style: echarts.graphic.setTextStyle({}, textStyleModel, {
style: createTextStyle(textStyleModel, {
x: drawn.info.fillTextOffsetX,
y: drawn.info.fillTextOffsetY + size * 0.5,
text: text,
textBaseline: 'middle',
textFill: data.getItemVisual(dataIdx, 'color'),
verticalAlign: 'middle',
fill: data.getItemVisual(dataIdx, 'style').fill,
fontSize: size
}),
scale: [1 / drawn.info.mu, 1 / drawn.info.mu],
position: [
(drawn.gx + drawn.info.gw / 2) * gridSize,
(drawn.gy + drawn.info.gh / 2) * gridSize
],
scaleX: 1 / drawn.info.mu,
scaleY: 1 / drawn.info.mu,
x: (drawn.gx + drawn.info.gw / 2) * gridSize,
y: (drawn.gy + drawn.info.gh / 2) * gridSize,
rotation: drawn.rot
});

group.add(textEl);

data.setItemGraphicEl(dataIdx, textEl);

echarts.graphic.setHoverStyle(
textEl,
echarts.graphic.setTextStyle({}, emphasisTextStyleModel, null, {forMerge: true}, true)
);
textEl.ensureState('emphasis').style = createTextStyle(emphasisTextStyleModel, null, {forMerge: true}, true);
textEl.stateTransition = {
duration: seriesModel.get('animation') ? seriesModel.get(['stateAnimation', 'duration']) : 0,
easing: seriesModel.get(['stateAnimation', 'easing'])
};
// TODO
textEl.__highDownDispatcher = true;
};

this._model = seriesModel;
Expand Down
13 changes: 1 addition & 12 deletions src/layout.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,8 +86,6 @@ if (!window.clearImmediate) {
})();
}

(function(global) {

// Check if WordCloud can run on this browser
var isSupported = (function isSupported() {
var canvas = document.createElement('canvas');
Expand Down Expand Up @@ -1161,13 +1159,4 @@ if (!window.clearImmediate) {
WordCloud.isSupported = isSupported;
WordCloud.minFontSize = minFontSize;

// Expose the library as an AMD module
if (typeof define === 'function' && define.amd) {
define('wordcloud', [], function() { return WordCloud; });
} else if (typeof module !== 'undefined' && module.exports) {
module.exports = WordCloud;
} else {
global.WordCloud = WordCloud;
}

})(this); //jshint ignore:line
export default WordCloud;
20 changes: 10 additions & 10 deletions src/wordCloud.js
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
var echarts = require('echarts/lib/echarts');
var layoutUtil = require('echarts/lib/util/layout');
import * as echarts from 'echarts/lib/echarts';
import * as layoutUtil from 'echarts/lib/util/layout';

require('./WordCloudSeries');
require('./WordCloudView');
import './WordCloudSeries';
import './WordCloudView';

var wordCloudLayoutHelper = require('./layout');
import wordCloudLayoutHelper from './layout';

if (!wordCloudLayoutHelper.isSupported) {
throw new Error('Sorry your browser not support wordCloud');
Expand Down Expand Up @@ -95,19 +95,19 @@ echarts.registerLayout(function (ecModel, api) {
var itemModel = data.getItemModel(idx);
return [
data.getName(idx),
itemModel.get('textStyle.normal.textSize', true)
itemModel.get('textStyle.fontSize', true)
|| echarts.number.linearMap(value, valueExtent, sizeRange),
idx
];
}).sort(function (a, b) {
// Sort from large to small in case there is no more room for more words
return b[1] - a[1];
}),
fontFamily: seriesModel.get('textStyle.normal.fontFamily')
|| seriesModel.get('textStyle.emphasis.fontFamily')
fontFamily: seriesModel.get('textStyle.fontFamily')
|| seriesModel.get('emphasis.textStyle.fontFamily')
|| ecModel.get('textStyle.fontFamily'),
fontWeight: seriesModel.get('textStyle.normal.fontWeight')
|| seriesModel.get('textStyle.emphasis.fontWeight')
fontWeight: seriesModel.get('textStyle.fontWeight')
|| seriesModel.get('emphasis.textStyle.fontWeight')
|| ecModel.get('textStyle.fontWeight'),
gridSize: gridSize,

Expand Down
34 changes: 19 additions & 15 deletions webpack.config.js
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,20 @@
var PROD = process.argv.indexOf('-p') >= 0;

module.exports = {
entry: {
'echarts-wordcloud': __dirname + '/index.js'
},
output: {
libraryTarget: 'umd',
library: ['echarts-wordcloud'],
path: __dirname + '/dist',
filename: PROD ? '[name].min.js' : '[name].js'
},
externals: {
'echarts/lib/echarts': 'echarts'
}
module.exports = (env, options) => {
return {
entry: {
'echarts-wordcloud': __dirname + '/index.js'
},
output: {
libraryTarget: 'umd',
library: ['echarts-wordcloud'],
path: __dirname + '/dist',
filename: options.mode === 'production' ? '[name].min.js' : '[name].js'
},
optimization: {
concatenateModules: true
},
devtool: 'source-map',
externals: {
'echarts/lib/echarts': 'echarts'
}
};
};

0 comments on commit cdf8c77

Please sign in to comment.