Commit f2f6de90 authored by 晓彤's avatar 晓彤

折线图

parent 53de8e36
File added
# svg_chart
基于svg的简单chart组件
\ No newline at end of file
body {
/* display: flex;
justify-content: center;
align-items: center;
height: 100vh; */
margin: 0px;
}
#global-svg {
background-color: #ffffff;
/* max-width: 1000px; */
/* border: 1px solid red; */
}
#global-svg .path-g-container {
--stroke-length: 0;
}
#global-svg .line {
stroke-dasharray: var(--stroke-length);
stroke-dashoffset: var(--stroke-length);
/* animation-delay: .3s; */
}
.x-text, .y-text {
font-family: Helvetica;
animation: .5s fade-in ease-in-out;
animation-fill-mode: forwards;
}
.value-text {
font-size: 3px;
}
/* 线动画线 */
@keyframes animate-line {
from {
stroke-dashoffset: var(--stroke-length)
}
to {
stroke-dashoffset: 0
}
}
@keyframes animate-line-bg {
from {
fill: 'url(#line-bg-1)';
}
to {
fill: 'url(#line-bg-1)'
}
}
#global-svg .line-1 {
/* fill: transparent; */
}
#global-svg.animate .line {
animation: 3s animate-line linear;
animation-fill-mode: forwards;
}
#global-svg.animate .line-1 {
/* animation: 3s animate-line-bg linear;
animation-fill-mode: forwards; */
}
/* 控制圆点动画效果 */
@keyframes zoom-in {
from {
transform: scale(0);
}
to {
transform: scale(1);
}
}
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* 圆点动画 */
#global-svg .point {
opacity: 0;
position: relative;
}
#global-svg .point::after {
content: '';
position: absolute;
width: 18px;
height: 18px;
/* background-color: red; */
}
#global-svg.animate .point {
animation: .5s fade-in ease-in-out, .5s zoom-in ease-in-out;
animation-fill-mode: forwards;
animation-delay: var(--delay);
}
/* 数值动画 */
#global-svg .value-text {
opacity: 0;
}
#global-svg.animate .value-text {
animation: .5s fade-in ease-in-out;
animation-fill-mode: forwards;
animation-delay: var(--delay);
}
.loading {
font-size: 5px;
color: #999;
transition: .25s opacity ease-in-outl
}
#global-svg.animate .loading {
opacity: 0;
}
#global-svg .hover-circle, .hover-line {
opacity: 0;
}
var diffValue;
var chart = {
// 初始
init: function(divEl) {
let _outWidth = divEl.getAttribute('width');
let _outHeight = divEl.getAttribute('height');
diffValue = parseInt(_outWidth) / parseInt(_outHeight);
// 最外层svg
let _globalSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
_globalSvg.setAttribute('id', 'global-svg');
_globalSvg.setAttribute('width', _outWidth);
_globalSvg.setAttribute('height', _outHeight);
_globalSvg.setAttribute('viewBox', `0 0 ${ _outWidth} ${_outHeight}`);
_globalSvg.setAttribute('preserveAspectRatio', 'none');
_globalSvg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
_globalSvg.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink');
_globalSvg.setAttribute('baseProfile', 'full');
divEl.appendChild(_globalSvg);
// svg内中的g,标签
let _outG = document.createElementNS('http://www.w3.org/2000/svg', 'g');
_outG.setAttribute('id', 'out-g');
_outG.setAttribute('transform', `translate(0, ${_outHeight}) scale(1, -1)`); // 进行翻转
_globalSvg.appendChild(_outG);
//创建放入底部x轴数值的g标签
let _xG = document.createElementNS('http://www.w3.org/2000/svg', 'g');
_xG.setAttribute('id', 'x-g');
_globalSvg.appendChild(_xG);
// 在g创建需要包裹住所需内容的g标签
// 1、创建放入左侧y轴横线及数值的g标签
let _yG = document.createElementNS('http://www.w3.org/2000/svg', 'g');
_yG.setAttribute('id', 'y-g');
_outG.appendChild(_yG);
// 2、创建放入线段数值的g标签
let _pathG = document.createElementNS('http://www.w3.org/2000/svg', 'g');
_pathG.setAttribute('id', 'path-g');
_outG.appendChild(_pathG);
// 3、创建放入折线图竖线
let _pathDeployLineG = document.createElementNS('http://www.w3.org/2000/svg', 'g');
_pathDeployLineG.setAttribute('id', 'path-deploy-line-g');
_outG.appendChild(_pathDeployLineG);
// 4、创建放入折线图背景色数值
let _pathBgG = document.createElementNS('http://www.w3.org/2000/svg', 'g');
_pathBgG.setAttribute('id', 'path-bg-g');
_outG.appendChild(_pathBgG);
// 5、创建hover时选择区块的g
let _hoverG = document.createElementNS('http://www.w3.org/2000/svg', 'g');
_hoverG.setAttribute('id', 'hover-g');
_outG.appendChild(_hoverG);
// 6、创建折线图背景颜色的样式g
let _pathBgColor = document.createElementNS('http://www.w3.org/2000/svg', 'g');
_pathBgColor.setAttribute('id', 'path-bg-color-g');
_outG.appendChild(_pathBgColor);
// 7、创建放入折线图圆点
let _pathDeployCircleG = document.createElementNS('http://www.w3.org/2000/svg', 'g');
_pathDeployCircleG.setAttribute('id', 'path-deploy-circle-g');
_outG.appendChild(_pathDeployCircleG);
return {setOption: setOption};
},
}
var _option;
// 根据接收数据,渲染出样式
function setOption(option) {
_option = option;
let svg_width = document.querySelector('#global-svg').viewBox.baseVal.width;
let svg_height = document.querySelector('#global-svg').viewBox.baseVal.height;
let _y = option.yAxis; // 左侧y轴样式
let _x = option.xAxis; // 底部x轴
let _aroundX = _x.outpadding ? _x.outpadding : 12; // x轴距离页面上下左右距离
let _aroundInX = _x.inpadding? _x.inpadding : 5; // 折线距离左右线段距离
let _aroundY = _y.padding ? _y.padding + _y.font.fontSize : 5 + _y.font.fontSize; // y轴距离页面边距左右距离
let _aroundTextY = _y.padding ? _y.padding : 5; // y轴文字距离页面左侧的距离
let _diffV = _y.max / (_y.totalLine - 1); // 计算y轴数据之间差值
let _x_startX = _aroundX + _aroundY + _aroundInX; // x轴底部开始位置
let x_padding = (svg_width - _aroundX * 2 - _aroundY - _aroundInX * 2) / (option.xAxis.data.length - 1); // 每段数据间距
let y_padding = (svg_height - _aroundX - _x.font.fontSize) / option.yAxis.totalLine;
console.log(y_padding, '------padding', _aroundX)
// y轴展示
for (var i = 0; i < _y.totalLine; i++) {
// 数值展示
let _yP = (i * 1 + 1) * y_padding;
let _yText = document.createElementNS('http://www.w3.org/2000/svg', 'text');
_yText.setAttribute('text-anchor', 'middle');
_yText.setAttribute('alignment-baseline', 'middle');
_yText.setAttribute('x', _aroundTextY);
_yText.setAttribute('y', _yP);
_yText.setAttribute('transform', `translate(0, ${_yP * 2 }) scale(1, -1)`);
_yText.classList.add('y-text');
_yText.setAttribute('style', `font-size:${_countFont(_y.font.fontSize)};fill:${_y.font.color}`);
_yText.appendChild(document.createTextNode( Math.round(i * _diffV * 100) / 100));
document.querySelector('#y-g').appendChild(_yText);
// 横线
let _yLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
_yLine.setAttribute('x1', _aroundY + _aroundX);
_yLine.setAttribute('y1', _yP); // y轴需要计算
_yLine.setAttribute('x2', svg_width - _aroundX); // svg宽度 - x轴padding
_yLine.setAttribute('y2', _yP); // y轴需要计算
_yLine.setAttribute('stroke', `${_y.yLineColor}`);
_yLine.setAttribute('stroke-width', '1');
document.querySelector('#y-g').appendChild(_yLine);
}
// 底部x轴样式
for (let m in _x.data) {
console.log(_aroundX, '-----_aroundX')
let _xText = document.createElementNS('http://www.w3.org/2000/svg', 'text');
_xText.setAttribute('text-anchor', 'middle');
_xText.setAttribute('alignment-baseline', 'middle');
_xText.setAttribute('x', _x_startX);
_xText.setAttribute('y', svg_height - y_padding + _x.font.fontSize + _aroundX);
_xText.setAttribute('id', 'x-text-'+m);
_xText.classList.add('x-text');
_xText.setAttribute('style', `font-size:${_countFont(_x.font.fontSize)};fill:${_x.font.color}`);
_xText.appendChild(document.createTextNode(_x.data[m]));
document.querySelector('#x-g').appendChild(_xText);
// 折线竖线分块,实现hover选择功能
let verticalLine = document.createElementNS('http://www.w3.org/2000/svg', 'path');
let endX = _x_startX + x_padding; // 计算hover区域的轴
let endY = (_y.totalLine)* y_padding;
let _vPath = (`M${_x_startX},${y_padding} L${_x_startX},${endY} ${endX},${endY} ${endX},${y_padding}Z`);
verticalLine.setAttribute('fill', 'transparent');
verticalLine.setAttribute('d',_vPath);
verticalLine.setAttribute('class', m)
document.querySelector('#hover-g').appendChild(verticalLine);
verticalLine.addEventListener('mouseout', function() {
hoverMouseout(event, m, option);
}, false); // 鼠标移出
verticalLine.addEventListener('mouseover', function(){
hoverMouseover(event, m, option);
}, false); // 鼠标移入
_x_startX += x_padding;
}
// 折线图数值及样式
for(let l in option.series) {
let path_data = [];
let start_x = _aroundX + _aroundY + _aroundInX; // 折线图数据开始值,y轴间距 + x轴距离y轴的间距
for (let s in option.series[l].data) {
let _data = option.series[l].data;
let _startY = y_padding * (_data[s] / _diffV) + y_padding;
path_data.push(`${start_x},${_startY}`);
// 折线图上圆点显示
// hover时,竖线显示, 只生成一次,因为他们是一样的
if (l == 0) {
let hoverLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
hoverLine.setAttribute('x1', start_x);
hoverLine.setAttribute('y1', y_padding); // y轴需要计算
hoverLine.setAttribute('x2', start_x);
hoverLine.setAttribute('y2', (_y.totalLine) * y_padding); // y轴需要计算
hoverLine.setAttribute('stroke', option.series[l].hoverStyle.linestroke);
hoverLine.setAttribute('stroke-width', '1');
hoverLine.classList.add('hover-line');
hoverLine.classList.add('hover-line-'+s);
document.querySelector('#path-deploy-line-g').appendChild(hoverLine);
}
// 折线hover后,圆点放大
let hoverCircle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
hoverCircle.setAttribute('cx', start_x);
hoverCircle.setAttribute('cy', _startY)
hoverCircle.setAttribute('r', 5);
hoverCircle.setAttribute('stroke', option.series[l].hoverStyle.circlestroke);
hoverCircle.setAttribute('stroke-width', 3);
hoverCircle.setAttribute('fill', 'none');
hoverCircle.classList.add('hover-circle');
hoverCircle.classList.add('hover-circle-'+s);
document.querySelector('#path-deploy-circle-g').appendChild(hoverCircle);
// 折线上设置圆点
let circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
circle.setAttribute('cx', start_x);
circle.setAttribute('cy', _startY);
circle.setAttribute('r', 3);
circle.setAttribute('stroke', 'white');
circle.setAttribute('stroke-width', 1);
circle.setAttribute('fill', option.series[l].normalStyle.circlestroke);
circle.setAttribute('transform-origin', `${start_x} ${_startY}`); // 圆点中心位置
circle.style.setProperty('--delay', `${(3 * parseInt(s) / _data.length)}s`);
circle.classList.add('point');
document.querySelector('#path-deploy-circle-g').appendChild(circle);
start_x += x_padding;
}
// 创建折线图及背景
createPathLine(option, l, path_data, y_padding);
}
}
// 鼠标移出
function hoverMouseout(event, s, option) {
// console.log('鼠标移出', s)
let _allEl = document.querySelectorAll('.hover-circle-' +s);
for (var i = 0; i < _allEl.length; i++) {
_allEl[i].style.setProperty('opacity', 0);
}
document.querySelector('.hover-line-' +s).style.setProperty('opacity', 0);
document.querySelector('#x-text-'+s).style.setProperty('fill', option.xAxis.font.color);
}
// 鼠标移入
function hoverMouseover(event, s) {
// console.log(s,'鼠标移入', event);
let _allEl = document.querySelectorAll('.hover-circle-' +s);
for (var i = 0; i < _allEl.length; i++) {
_allEl[i].style.setProperty('opacity', 1);
}
document.querySelector('.hover-line-' +s).style.setProperty('opacity', 1);
document.querySelector('#x-text-'+s).style.setProperty('fill', option.xAxis.font.hoverFontColor);
}
/*
* 创建折线图
* option: 数据图参数
* l: series的index
* data: 组装数据点
* bottomY: y轴每个线段之间间距
*/
function createPathLine(option, l, data, bottomY) {
// 折线是否平滑
let _issmooth = option.series[l].smooth ? true : false;
let _prefix = _issmooth ? 'R' : 'L';
let _isPathBg = option.series[l].normalStyle.pathBgColor && option.series[l].normalStyle.pathBgColor != '' ? true : false;
let _gPathC = document.createElementNS('http://www.w3.org/2000/svg', 'g');
_gPathC.classList.add('path-g-container');
_gPathC.setAttribute('id', 'path-g-container-'+l);
document.querySelector('#path-g').appendChild(_gPathC);
// 折线展示
let line = document.createElementNS('http://www.w3.org/2000/svg', 'path');
line.setAttribute('id', 'line-'+l);
line.classList.add('line');
line.setAttribute('stroke-width', '2');
line.setAttribute('fill', 'none');
line.setAttribute('style', `stroke:${option.series[l].normalStyle.linestroke};animation-delay:.${option.animateTime}s`);
let _new_path_data = data;
let startPath = _new_path_data.slice(0, 1);
_new_path_data.splice(0, 1);
let _line_path = (`M${startPath.join(' ')} ${_prefix}${_new_path_data.join(' ')}`);
let _newPath = _issmooth ? parsePath(_line_path) : _line_path;
line.setAttribute('d', _newPath);
document.querySelector('#path-g-container-'+l).appendChild(line);
// 折线图背景色数值
if (_isPathBg) {
let line_bg = document.createElementNS('http://www.w3.org/2000/svg', 'path');
line_bg.setAttribute('id', 'line-1-'+l);
line_bg.classList.add('line-1');
line_bg.setAttribute('fill', `${'url("#line-bg-'+l+'")'}`);
let path_end = _new_path_data[_new_path_data.length - 1].split(',')
let path_start = startPath.join(',').split(',');
// 组新数据
let bg_path = (`M${startPath.join(' ')} ${_prefix}${_new_path_data.join(' ')} H${path_end[0]}V${bottomY}H${path_start[0]}Z`);
let _newBgPath = _issmooth ? parsePath(bg_path) : bg_path;
line_bg.setAttribute('d', _newBgPath);
document.querySelector('#path-bg-g').appendChild(line_bg);
// 创建折线图显示背景颜色标签
// let _linearTime = setTimeout(() => {
creatLinearGradient('line-bg-'+l, option.series[l].normalStyle.pathBgColor, l);
// clearTimeout(_linearTime);
// }, 1000 * 3);
}
// //计算长度,实现动画
let strokeLength = Math.ceil(document.querySelector('#line-'+l).getTotalLength()); //获取折线图的长度
document.querySelector('#path-g-container-'+l).style.setProperty('--stroke-length', strokeLength);
document.querySelector('#global-svg').classList.add('animate');
}
// 背景色显示的标签位置
function creatLinearGradient(id, bgColor, l) {
// 背景外层
let _linear = document.createElementNS('http://www.w3.org/2000/svg', 'linearGradient');
_linear.setAttribute('id', id);
_linear.setAttribute('x1', '0%');
_linear.setAttribute('x2', '0%');
_linear.setAttribute('y1', '0%');
_linear.setAttribute('y2', '100%');
// _linear.setAttribute('style', 'fill-opacity: 0');
document.querySelector('#path-bg-color-g').appendChild(_linear);
// 背景颜色
let _colorData = [
{offset: "0", stopColor: bgColor, stopOpacity: '0'},
{offset: "1", stopColor: bgColor, stopOpacity: '0'}
];
for (let k in _colorData) {
let _stop = document.createElementNS('http://www.w3.org/2000/svg', 'stop');
_stop.setAttribute('offset', _colorData[k].offset);
_stop.setAttribute('stop-color', _colorData[k].stopColor);
_stop.setAttribute('stop-opacity', _colorData[k].stopOpacity);
_stop.setAttribute('id', 'stop-'+l+'-'+k);
_linear.appendChild(_stop);
}
let _bgAnimate1 = document.createElementNS('http://www.w3.org/2000/svg', 'animate');
_bgAnimate1.setAttribute('attributeName', 'y1');
_bgAnimate1.setAttribute('from', '1');
_bgAnimate1.setAttribute('to', '0');
// _bgAnimate.setAttribute('path', path);
_bgAnimate1.setAttribute('dur', '0.3s');
_bgAnimate1.setAttribute('begin', `${option.animateTime}s`);
_bgAnimate1.setAttribute('repeatCount', '1');
_bgAnimate1.setAttribute('fill', 'freeze');
_linear.appendChild(_bgAnimate1);
// 背景动画
let _bgAnimate = document.createElementNS('http://www.w3.org/2000/svg', 'animate');
_bgAnimate.setAttribute('attributeName', 'stop-opacity');
_bgAnimate.setAttribute('from', '0.5');
_bgAnimate.setAttribute('to', '0');
_bgAnimate.setAttribute('dur', '0s');
_bgAnimate.setAttribute('begin', `${option.animateTime}s`);
_bgAnimate.setAttribute('repeatCount', '1');
_bgAnimate.setAttribute('fill', 'freeze');
// _stop.appendChild(_bgAnimate);
document.querySelector('#stop-'+l +'-1').appendChild(_bgAnimate);
}
// 数字换算
function _countFont(fontSize) {
let _diff = diffValue;
// return fontSize / _diff;
return fontSize;
}
//计算path值
function parsePath( data ) {
var pathArray = [];
var lastX = "";
var lastY = "";
var d = data.toString();
if ( -1 != d.search(/[rR]/) ) {
// no need to redraw the path if no Catmull-Rom segments are found
// split path into constituent segments
var pathSplit = d.split(/([A-Za-z])/);
for (var i = 0, iLen = pathSplit.length; iLen > i; i++) {
var segment = pathSplit[i];
// make command code lower case, for easier matching
// NOTE: this code assumes absolution coordinates, and doesn't account for relative command coordinates
var command = segment.toLowerCase()
if ( -1 != segment.search(/[A-Za-z]/) ) {
var val = "";
if ( "z" != command ) {
i++;
val = pathSplit[ i ].replace(/\s+$/, '');
}
if ( "r" == command ) {
// "R" and "r" are the a Catmull-Rom spline segment
var points = lastX + "," + lastY + " " + val;
// convert Catmull-Rom spline to B茅zier curves
var beziers = catmullRom2bezier( points );
//insert replacement curves back into array of path segments
pathArray.push( beziers );
} else {
// rejoin the command code and the numerical values, place in array of path segments
pathArray.push( segment + val );
// find last x,y points, for feeding into Catmull-Rom conversion algorithm
if ( "h" == command ) {
lastX = val;
} else if ( "v" == command ) {
lastY = val;
} else if ( "z" != command ) {
var c = val.split(/[,\s]/);
lastY = c.pop();
lastX = c.pop();
}
}
}
}
// recombine path segments and set new path description in DOM
// path.setAttribute( "d", pathArray.join(" ") );
return pathArray;
}
}
function catmullRom2bezier( points ) {
// alert(points)
var crp = points.split(/[,\s]/);
var d = "";
for (var i = 0, iLen = crp.length; iLen - 2 > i; i+=2) {
var p = [];
if ( 0 == i ) {
p.push( {x: parseFloat(crp[ i ]), y: parseFloat(crp[ i + 1 ])} );
p.push( {x: parseFloat(crp[ i ]), y: parseFloat(crp[ i + 1 ])} );
p.push( {x: parseFloat(crp[ i + 2 ]), y: parseFloat(crp[ i + 3 ])} );
p.push( {x: parseFloat(crp[ i + 4 ]), y: parseFloat(crp[ i + 5 ])} );
} else if ( iLen - 4 == i ) {
p.push( {x: parseFloat(crp[ i - 2 ]), y: parseFloat(crp[ i - 1 ])} );
p.push( {x: parseFloat(crp[ i ]), y: parseFloat(crp[ i + 1 ])} );
p.push( {x: parseFloat(crp[ i + 2 ]), y: parseFloat(crp[ i + 3 ])} );
p.push( {x: parseFloat(crp[ i + 2 ]), y: parseFloat(crp[ i + 3 ])} );
} else {
p.push( {x: parseFloat(crp[ i - 2 ]), y: parseFloat(crp[ i - 1 ])} );
p.push( {x: parseFloat(crp[ i ]), y: parseFloat(crp[ i + 1 ])} );
p.push( {x: parseFloat(crp[ i + 2 ]), y: parseFloat(crp[ i + 3 ])} );
p.push( {x: parseFloat(crp[ i + 4 ]), y: parseFloat(crp[ i + 5 ])} );
}
// Catmull-Rom to Cubic Bezier conversion matrix
// 0 1 0 0
// -1/6 1 1/6 0
// 0 1/6 1 -1/6
// 0 0 1 0
var bp = [];
bp.push( { x: p[1].x, y: p[1].y } );
bp.push( { x: ((-p[0].x + 6*p[1].x + p[2].x) / 6), y: ((-p[0].y + 6*p[1].y + p[2].y) / 6)} );
bp.push( { x: ((p[1].x + 6*p[2].x - p[3].x) / 6), y: ((p[1].y + 6*p[2].y - p[3].y) / 6) } );
bp.push( { x: p[2].x, y: p[2].y } );
d += "C" + bp[1].x + "," + bp[1].y + " " + bp[2].x + "," + bp[2].y + " " + bp[3].x + "," + bp[3].y + " ";
}
return d;
}
## 引入chart
通过标签方式直接引入创建好的chart
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入 charts 文件 -->
<script src="chart.js"></script>
</head>
</html>
```
## 绘制图表
在绘图前我们需要为 chart 准备一个具备高宽的 DOM 容器
```
<body>
<!-- 为 ECharts 准备一个具备大小(宽高)的 DOM 必须为数字 -->
<div id = 'main' width = '425' height = '236'></div>
</body>
```
然后就可以通过chart.init 方法初始化一个chart 实例并通过 setOption 方法生成一个折线图。下面完整代码
```
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="./chart/chart.css">
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
</body>
<script type="text/javascript" src = './chart/chart.js'></script>
<script type="text/javascript">
// 基于准备好的dom,初始化chart实例
var myChart = chart.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
animateTime: 3, // 折线图动画时间
// x轴配置信息
xAxis: {
data: ['Mon','Tue','Wed','Thu','Fri','Sat', 'Sun'],
font: {
fontSize: 4,
color: 'rgba(40,40,40,0.3)',
hoverFontColor: 'rgba(40,40,40,1)', // 鼠标hover时,字体颜色
},
outpadding: 10, // x轴距离页面左右上下之间间距
inpadding: 5, // 折线图距离线段的左右之间间距
},
yAxis: {
font: {
fontSize: 4,
color: 'rgba(40,40,40,0.3)'
},
yLineColor: '#F6F6F6', // y轴线段颜色
min: 0, // 最小值
max: 1, // 最大值
totalLine: 5, // 需要线段数量
padding: 10, // y轴之间间距
},
series: [
{
type: 'line', // chart的类型 line: 折线图
smooth: true, // 是否是平滑曲线
data: [0.9,0.4,0.7,0.9,0.26,1,0.54],
normalStyle: { // 折线图常规样式
linestroke: '#953C96', // 折线图线段颜色
circlestroke: '#953C96', // 折线图点颜色
pathBgColor: '#953C96', // 非必填项,如果没有这个参数,说明不需要折线阴影
},
hoverStyle: { // 折线hover时配置
circlestroke: '#DFC4DF', // 点外侧颜色
linestroke: '#f6f6f6' // 折线图hover时,竖线颜色
}
},
{
type: 'line',
smooth: true, // 是否是平滑曲线
data: [0.8,0.1,0.7,1,0.26,0.3,0.9],
normalStyle: {
linestroke: '#2A9BC5',
circlestroke: '#2A9BC5',
pathBgColor: '#2A9BC5'
},
hoverStyle: {
circlestroke: '#87CEFA',
linestroke: '#f6f6f6'
}
}
]
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</html>
```
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>折线demo</title>
<link rel="stylesheet" href="./chart/chart.css">
</head>
<body>
<div style = 'width:100%;height:400px;'>
<div id = 'tongchart' width = '425' height = '236'></div>
<!-- <div id = 'tongchart' width = '425' height = '236' style = 'width:425px;height:236px;'></div> -->
</div>
</body>
<script type="text/javascript" src = './chart/chart.js'></script>
<script type="text/javascript">
let _width = document.body.clientWidth;
console.log(_width, '----');
// document.querySelector('#tongchart').setAttribute('width', _width);
var myChart = chart.init(document.getElementById('tongchart'));
var option = {
animateTime: 3,
xAxis: {
data: ['Mon','Tue','Wed','Thu','Fri','Sat', 'Sun'],
font: {
fontSize: 12,
color: 'rgba(40,40,40,0.3)',
hoverFontColor: 'rgba(40,40,40,1)'
},
outpadding: 10,
inpadding: 10,
},
yAxis: {
font: {
fontSize: 12,
color: 'rgba(40,40,40,0.3)'
},
yLineColor: '#F6F6F6', // '#F6F6F6',
min: 0,
max: 1,
totalLine: 5,
padding: 15
},
series: [
{
type: 'line',
smooth: true, // 是否是平滑曲线
data: [1,0.4,0.7,0.9,0.26,1,0.54],
normalStyle: {
linestroke: '#953C96',
circlestroke: '#953C96',
pathBgColor: '#953C96', // 非必填项,如果没有这个参数,说明不需要折线阴影
},
hoverStyle: {
circlestroke: '#DFC4DF',
linestroke: '#f6f6f6', // '#f6f6f6'
}
},
{
type: 'line',
smooth: true, // 是否是平滑曲线
data: [0.8,0.1,0.7,1,0.26,0.3,0.9],
normalStyle: {
linestroke: '#2A9BC5',
circlestroke: '#2A9BC5',
pathBgColor: '#2A9BC5'
},
hoverStyle: {
circlestroke: '#87CEFA',
linestroke: '#f6f6f6'
}
}
]
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment