提交 2b905afd 编写于 作者: P pissang

refact: update to echarts5 #119 #121 #120

上级 124542b0
......@@ -22,23 +22,15 @@ ECharts can be downloaded at [GitHub dist directory](https://github.com/ecomfe/e
## Install echarts-liquidfill with npm
```sh
# install echarts as peer dependency
npm install echarts
npm install echarts-liquidfill
```
npm will warn you that you have to install peer dependencies by yourself:
NOTE:
```
npm WARN echarts-liquidfill@2.0.6 requires a peer of echarts@^4.8.0 but none is installed. You must install peer dependencies yourself.
npm WARN echarts-liquidfill@2.0.6 requires a peer of zrender@^4.3.1 but none is installed. You must install peer dependencies yourself.
```
**Note that the version numbers may not be exactly the same with the above message. Use the version numbers in the warning or refer to package.json for echarts and zrender version numbers.**
```
npm i echarts@^4.8.0 zrender@^4.3.1
```
Remember to install echarts and zrender manually with the above command.
echarts-liquidfill@3 is compitable with echarts@5
echarts-liquidfill@2 is compitable with echarts@4
## Download echarts-liquidfill from GitHub
......
......@@ -3,7 +3,7 @@
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Lobster+Two:700i" rel="stylesheet">
<script src='../dist/echarts.js'></script>
<script src='../../echarts/dist/echarts.js'></script>
<script src='../dist/echarts-liquidfill.js'></script>
</head>
<body>
......
module.exports = require('./src/liquidFill');
import './src/liquidFill';
{
"name": "echarts-liquidfill",
"version": "2.0.6",
"version": "3.0.0",
"description": "ECharts liquid fill extension",
"main": "index.js",
"main": "dist/echarts-liquidfill.js",
"module": "index.js",
"scripts": {
"dev": "webpack --env.development --watch",
"build": "webpack --env.development",
"release": "webpack --env.production"
"dev": "webpack --mode development --watch",
"build": "webpack --mode development",
"release": "webpack --mode production && webpack --mode development"
},
"author": {
"name": "Ovilia",
......@@ -15,16 +16,15 @@
},
"license": "MIT",
"peerDependencies": {
"echarts": "^4.8.0",
"zrender": "^4.3.1"
"echarts": "^5.0.1"
},
"repository": {
"type": "git",
"url": "https://github.com/ecomfe/echarts-liquidfill"
},
"devDependencies": {
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11",
"webpack-link": "^0.2.0"
"echarts": "^5.0.1",
"webpack": "^5.11.1",
"webpack-cli": "^4.3.1"
}
}
/*
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
/* eslint-disable */
// Modified from echarts
import * as echarts from 'echarts/lib/echarts';
import { calculateTextPosition } from 'zrender/lib/contain/text';
var Triangle = echarts.graphic.extendShape({
type: 'triangle',
shape: {
cx: 0,
cy: 0,
width: 0,
height: 0
},
buildPath: function (path, shape) {
var cx = shape.cx;
var cy = shape.cy;
var width = shape.width / 2;
var height = shape.height / 2;
path.moveTo(cx, cy - height);
path.lineTo(cx + width, cy + height);
path.lineTo(cx - width, cy + height);
path.closePath();
}
});
var Diamond = echarts.graphic.extendShape({
type: 'diamond',
shape: {
cx: 0,
cy: 0,
width: 0,
height: 0
},
buildPath: function (path, shape) {
var cx = shape.cx;
var cy = shape.cy;
var width = shape.width / 2;
var height = shape.height / 2;
path.moveTo(cx, cy - height);
path.lineTo(cx + width, cy);
path.lineTo(cx, cy + height);
path.lineTo(cx - width, cy);
path.closePath();
}
});
var Pin = echarts.graphic.extendShape({
type: 'pin',
shape: {
x: 0,
y: 0,
width: 0,
height: 0
},
buildPath: function (path, shape) {
var x = shape.x;
var y = shape.y;
var w = shape.width / 5 * 3;
var h = Math.max(w, shape.height);
var r = w / 2;
var dy = r * r / (h - r);
var cy = y - h + r + dy;
var angle = Math.asin(dy / r);
var dx = Math.cos(angle) * r;
var tanX = Math.sin(angle);
var tanY = Math.cos(angle);
var cpLen = r * 0.6;
var cpLen2 = r * 0.7;
path.moveTo(x - dx, cy + dy);
path.arc(x, cy, r, Math.PI - angle, Math.PI * 2 + angle);
path.bezierCurveTo(x + dx - tanX * cpLen, cy + dy + tanY * cpLen, x, y - cpLen2, x, y);
path.bezierCurveTo(x, y - cpLen2, x - dx + tanX * cpLen, cy + dy + tanY * cpLen, x - dx, cy + dy);
path.closePath();
}
});
var Arrow = echarts.graphic.extendShape({
type: 'arrow',
shape: {
x: 0,
y: 0,
width: 0,
height: 0
},
buildPath: function (ctx, shape) {
var height = shape.height;
var width = shape.width;
var x = shape.x;
var y = shape.y;
var dx = width / 3 * 2;
ctx.moveTo(x, y);
ctx.lineTo(x + dx, y + height);
ctx.lineTo(x, y + height / 4 * 3);
ctx.lineTo(x - dx, y + height);
ctx.lineTo(x, y);
ctx.closePath();
}
});
var symbolCtors = {
line: echarts.graphic.Rect,
rect: echarts.graphic.Rect,
roundRect: echarts.graphic.Rect,
square: echarts.graphic.Rect,
circle: echarts.graphic.Circle,
diamond: Diamond,
pin: Pin,
arrow: Arrow,
triangle: Triangle
};
var symbolShapeMakers = {
line: function (x, y, w, h, shape) {
var thickness = 2;
shape.x = x;
shape.y = y + h / 2 - thickness / 2;
shape.width = w;
shape.height = thickness;
},
rect: function (x, y, w, h, shape) {
shape.x = x;
shape.y = y;
shape.width = w;
shape.height = h;
},
roundRect: function (x, y, w, h, shape) {
shape.x = x;
shape.y = y;
shape.width = w;
shape.height = h;
shape.r = Math.min(w, h) / 4;
},
square: function (x, y, w, h, shape) {
var size = Math.min(w, h);
shape.x = x;
shape.y = y;
shape.width = size;
shape.height = size;
},
circle: function (x, y, w, h, shape) {
shape.cx = x + w / 2;
shape.cy = y + h / 2;
shape.r = Math.min(w, h) / 2;
},
diamond: function (x, y, w, h, shape) {
shape.cx = x + w / 2;
shape.cy = y + h / 2;
shape.width = w;
shape.height = h;
},
pin: function (x, y, w, h, shape) {
shape.x = x + w / 2;
shape.y = y + h / 2;
shape.width = w;
shape.height = h;
},
arrow: function (x, y, w, h, shape) {
shape.x = x + w / 2;
shape.y = y + h / 2;
shape.width = w;
shape.height = h;
},
triangle: function (x, y, w, h, shape) {
shape.cx = x + w / 2;
shape.cy = y + h / 2;
shape.width = w;
shape.height = h;
}
};
export var symbolBuildProxies = {};
echarts.util.each(symbolCtors, function (Ctor, name) {
symbolBuildProxies[name] = new Ctor();
});
var SymbolClz = echarts.graphic.extendShape({
type: 'symbol',
shape: {
symbolType: '',
x: 0,
y: 0,
width: 0,
height: 0
},
calculateTextPosition: function (out, config, rect) {
var res = calculateTextPosition(out, config, rect);
var shape = this.shape;
if (shape && shape.symbolType === 'pin' && config.position === 'inside') {
res.y = rect.y + rect.height * 0.4;
}
return res;
},
buildPath: function (ctx, shape, inBundle) {
var symbolType = shape.symbolType;
if (symbolType !== 'none') {
var proxySymbol = symbolBuildProxies[symbolType];
if (!proxySymbol) {
symbolType = 'rect';
proxySymbol = symbolBuildProxies[symbolType];
}
symbolShapeMakers[symbolType](shape.x, shape.y, shape.width, shape.height, proxySymbol.shape);
proxySymbol.buildPath(ctx, proxySymbol.shape, inBundle);
}
}
});
function symbolPathSetColor(color, innerColor) {
if (this.type !== 'image') {
var symbolStyle = this.style;
if (this.__isEmptyBrush) {
symbolStyle.stroke = color;
symbolStyle.fill = innerColor || '#fff';
symbolStyle.lineWidth = 2;
} else {
symbolStyle.fill = color;
}
this.markRedraw();
}
}
export function createSymbol(symbolType, x, y, w, h, color, keepAspect) {
var isEmpty = symbolType.indexOf('empty') === 0;
if (isEmpty) {
symbolType = symbolType.substr(5, 1).toLowerCase() + symbolType.substr(6);
}
var symbolPath;
if (symbolType.indexOf('image://') === 0) {
symbolPath = echarts.graphic.makeImage(symbolType.slice(8), new echarts.graphic.BoundingRect(x, y, w, h), keepAspect ? 'center' : 'cover');
} else if (symbolType.indexOf('path://') === 0) {
symbolPath = echarts.graphic.makePath(symbolType.slice(7), {}, new echarts.graphic.BoundingRect(x, y, w, h), keepAspect ? 'center' : 'cover');
} else {
symbolPath = new SymbolClz({
shape: {
symbolType: symbolType,
x: x,
y: y,
width: w,
height: h
}
});
}
symbolPath.__isEmptyBrush = isEmpty;
symbolPath.setColor = symbolPathSetColor;
if (color) {
symbolPath.setColor(color);
}
return symbolPath;
}
\ No newline at end of file
var echarts = require('echarts/lib/echarts');
require('./liquidFillSeries');
require('./liquidFillView');
echarts.registerVisual(
echarts.util.curry(
require('echarts/lib/visual/dataColor'), 'liquidFill'
)
);
import './liquidFillSeries';
import './liquidFillView';
\ No newline at end of file
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.liquidFill',
visualColorAccessPath: 'textStyle.normal.color',
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;
......
var echarts = require('echarts/lib/echarts');
import * as echarts from 'echarts/lib/echarts';
module.exports = echarts.graphic.extendShape({
export default echarts.graphic.extendShape({
type: 'ec-liquid-fill',
shape: {
......
var echarts = require('echarts/lib/echarts');
var numberUtil = echarts.number;
var symbolUtil = require('echarts/lib/util/symbol');
var parsePercent = numberUtil.parsePercent;
import * as echarts from 'echarts/lib/echarts';
import * as symbolUtil from './dep/symbol';
import * as numberUtil from 'echarts/lib/util/number';
import LiquidShape from './liquidFillShape';
import {createTextStyle} from 'echarts/lib/label/labelStyle';
var LiquidLayout = require('./liquidFillLayout');
function getShallow(model, path) {
return model && model.getShallow(path);
}
const parsePercent = numberUtil.parsePercent;
echarts.extendChartView({
......@@ -152,7 +149,7 @@ echarts.extendChartView({
// instant changes
waveElement.position = newWave.position;
waveElement.setClipPath(newWave.clipPath);
waveElement.setClipPath(newWave.getClipPath());
waveElement.shape.inverse = newWave.inverse;
setWaveAnimation(newIdx, waveElement, waveElement);
......@@ -302,7 +299,7 @@ echarts.extendChartView({
}
var x = radiusX * 2;
var wave = new LiquidLayout({
var wave = new LiquidShape({
shape: {
waveLength: waveLength,
radius: radiusX,
......@@ -322,7 +319,8 @@ echarts.extendChartView({
var hoverStyle = itemModel.getModel('emphasis.itemStyle')
.getItemStyle();
hoverStyle.lineWidth = 0;
echarts.graphic.setHoverStyle(wave, hoverStyle);
wave.ensureState('emphasis').style = hoverStyle;
// clip out the part outside the circle
var clip = getPath(radius, true);
......@@ -414,7 +412,7 @@ echarts.extendChartView({
return formatted == null ? defaultLabel : formatted;
}
var textOption = {
var textRectOption = {
z2: 10,
shape: {
x: left,
......@@ -423,22 +421,34 @@ echarts.extendChartView({
height: (isFillContainer ? radius[1] : radius) * 2
},
style: {
fill: 'transparent',
fill: 'transparent'
},
textConfig: {
position: labelModel.get('position') || 'inside'
},
silent: true
};
var textOption = {
style: {
text: formatLabel(),
textAlign: labelModel.get('align'),
textVerticalAlign: labelModel.get('baseline')
},
silent: true
}
};
Object.assign(textOption.style, createTextStyle(labelModel));
var outsideTextRect = new echarts.graphic.Rect(textRectOption);
var insideTextRect = new echarts.graphic.Rect(textRectOption);
insideTextRect.disableLabelAnimation = true;
outsideTextRect.disableLabelAnimation = true;
var outsideTextRect = new echarts.graphic.Rect(textOption);
var color = labelModel.get('color');
echarts.graphic.setText(outsideTextRect.style, labelModel, color);
var outsideText = new echarts.graphic.Text(textOption);
var insideText = new echarts.graphic.Text(textOption);
outsideTextRect.setTextContent(outsideText);
var insideTextRect = new echarts.graphic.Rect(textOption);
insideTextRect.setTextContent(insideText);
var insColor = labelModel.get('insideColor');
echarts.graphic.setText(insideTextRect.style, labelModel, insColor);
insideTextRect.style.textFill = insColor;
insideText.style.fill = insColor;
var group = new echarts.graphic.Group();
group.add(outsideTextRect);
......
module.exports = env => {
module.exports = (env, options) => {
return {
mode: env.production ? 'production' : 'development',
entry: {
'echarts-liquidfill': __dirname + '/index.js'
},
......@@ -8,7 +7,10 @@ module.exports = env => {
libraryTarget: 'umd',
library: ['echarts-liquidfill'],
path: __dirname + '/dist',
filename: env.production ? '[name].min.js' : '[name].js'
filename: options.mode === 'production' ? '[name].min.js' : '[name].js'
},
optimization: {
concatenateModules: true
},
externals: {
'echarts/lib/echarts': 'echarts'
......@@ -18,9 +20,6 @@ module.exports = env => {
alias: {
'echarts/lib/echarts': 'echarts'
}
},
optimization: {
minimize: env.production
}
}
};
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册