Skip to content

S
svg_chart
Commit 999323fd authored by 晓彤's avatar 晓彤
Browse files
Options

柱状图

parent 59c99053
Hide whitespace changes
Inline Side-by-side
Showing with 241 additions and 111 deletions
chart/chart.css
View file @ 999323fd
......@@ -6,17 +6,17 @@ body {
margin: 0px;
}
#global-svg {
.global-svg {
background-color: #ffffff;
/* max-width: 1000px; */
/* border: 1px solid red; */
}
#global-svg .path-g-container {
.global-svg .path-g-container {
--stroke-length: 0;
}
#global-svg .line {
.global-svg .line {
stroke-dasharray: var(--stroke-length);
stroke-dashoffset: var(--stroke-length);
/* animation-delay: .3s; */
......@@ -53,18 +53,18 @@ body {
}
}
#global-svg .line-1 {
.global-svg .line-1 {
/* fill: transparent; */
}
#global-svg.animate .line {
.global-svg.animate .line {
animation: 3s animate-line linear;
animation-fill-mode: forwards;
}
#global-svg.animate .line-1 {
.global-svg.animate .line-1 {
/* animation: 3s animate-line-bg linear;
animation-fill-mode: forwards; */
}
......@@ -93,12 +93,12 @@ body {
}
/* 圆点动画 */
#global-svg .point {
.global-svg .point {
opacity: 0;
position: relative;
}
#global-svg .point::after {
.global-svg .point::after {
content: '';
position: absolute;
width: 18px;
......@@ -106,18 +106,18 @@ body {
/* background-color: red; */
}
#global-svg.animate .point {
.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 {
.global-svg .value-text {
opacity: 0;
}
#global-svg.animate .value-text {
.global-svg.animate .value-text {
animation: .5s fade-in ease-in-out;
animation-fill-mode: forwards;
animation-delay: var(--delay);
......@@ -130,10 +130,10 @@ body {
transition: .25s opacity ease-in-outl
}
#global-svg.animate .loading {
.global-svg.animate .loading {
opacity: 0;
}
#global-svg .hover-circle, .hover-line {
.global-svg .hover-circle, .hover-line {
opacity: 0;
}
chart/chart.js
View file @ 999323fd
var diffValue;
var _outId;
var chart = {
// 初始
init: function(divEl) {
let _outWidth = divEl.getAttribute('width');
let _outHeight = divEl.getAttribute('height');
_outId = divEl.getAttribute('id');
// console.log(divEl.getAttribute('id'), '==========', divEl)
diffValue = parseInt(_outWidth) / parseInt(_outHeight);
// 最外层svg
let _globalSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
_globalSvg.setAttribute('id', 'global-svg');
_globalSvg.setAttribute('id', 'global-svg-'+_outId);
_globalSvg.classList.add('global-svg');
_globalSvg.setAttribute('width', _outWidth);
_globalSvg.setAttribute('height', _outHeight);
_globalSvg.setAttribute('viewBox', `0 0 ${ _outWidth} ${_outHeight}`);
......@@ -73,11 +77,11 @@ var chart = {
var _option;
// 根据接收数据，渲染出样式
function setOption(option) {
function setOption(option, outId) {
_option = option;
let svg_width = document.querySelector('#global-svg').viewBox.baseVal.width;
let svg_height = document.querySelector('#global-svg').viewBox.baseVal.height;
let svg_width = document.querySelector('#global-svg-'+_outId).viewBox.baseVal.width;
let svg_height = document.querySelector('#global-svg-'+_outId).viewBox.baseVal.height;
let _y = option.yAxis; // 左侧y轴样式
let _x = option.xAxis; // 底部x轴
let _aroundX = _x.outpadding ? _x.outpadding : 12; // x轴距离页面上下左右距离
......@@ -89,8 +93,6 @@ function setOption(option) {
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++) {
......@@ -105,7 +107,7 @@ function setOption(option) {
_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);
document.querySelector('#global-svg-'+_outId+' #y-g').appendChild(_yText);
// 横线
let _yLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
......@@ -115,23 +117,22 @@ function setOption(option) {
_yLine.setAttribute('y2', _yP); // y轴需要计算
_yLine.setAttribute('stroke', `${_y.yLineColor}`);
_yLine.setAttribute('stroke-width', '1');
document.querySelector('#y-g').appendChild(_yLine);
document.querySelector('#global-svg-'+_outId+' #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('x', _x_startX + 10);
_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);
document.querySelector('#global-svg-'+_outId+' #x-g').appendChild(_xText);
// 折线竖线分块，实现hover选择功能
let verticalLine = document.createElementNS('http://www.w3.org/2000/svg', 'path');
......@@ -141,13 +142,14 @@ function setOption(option) {
verticalLine.setAttribute('fill', 'transparent');
verticalLine.setAttribute('d',_vPath);
verticalLine.setAttribute('class', m)
document.querySelector('#hover-g').appendChild(verticalLine);
verticalLine.setAttribute('class', m);
verticalLine.setAttribute('id', 'hover-item-'+m);
document.querySelector('#global-svg-'+_outId+' #hover-g').appendChild(verticalLine);
verticalLine.addEventListener('mouseout', function() {
hoverMouseout(event, m, option);
hoverMouseout(event, m, option, outId);
}, false); // 鼠标移出
verticalLine.addEventListener('mouseover', function(){
hoverMouseover(event, m, option);
hoverMouseover(event, m, option, outId);
}, false); // 鼠标移入
_x_startX += x_padding;
......@@ -155,7 +157,21 @@ function setOption(option) {
// 折线图数值及样式
let _barArr = [];
for(let l in option.series) {
// 创建放入图形的g标签
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('#global-svg-'+_outId+' #path-g').appendChild(_gPathC);
// 当type类型为bar时，重新计算柱状图之间间距
if(option.series[l].type == 'bar') {
x_padding = (svg_width - _aroundX * 2 - _aroundY - _aroundInX * 2 - option.series[l].normalStyle.width * option.series[l].data.length) / (option.xAxis.data.length - 1) + option.series[l].normalStyle.width // 每段数据间距
_barArr.push(l);
}
let path_data = [];
let start_x = _aroundX + _aroundY + _aroundInX; // 折线图数据开始值，y轴间距 + x轴距离y轴的间距
for (let s in option.series[l].data) {
......@@ -163,75 +179,106 @@ function setOption(option) {
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);
// type为line时
if (option.series[l].type == 'line') {
// 折线图上圆点显示
// 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('#global-svg-'+_outId+' #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('#global-svg-'+_outId+' #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('#global-svg-'+_outId+' #path-deploy-circle-g').appendChild(circle);
}
// 折线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);
// 创建柱状图
if(option.series[l].type == 'bar') {
createPathBar(option, l, start_x, _startY, y_padding, s, _barArr.length);
}
start_x += x_padding;
}
// 创建折线图及背景
createPathLine(option, l, path_data, y_padding);
}
}
if (option.series[l].type == 'line') {
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);
/*
* 创建柱状图
* option: 数据图参数
* l: series的index
* start_x: 柱状图x
* _startY: 柱状图高度
* bottomY: 柱状图距离底部x轴距离
* s: 每个柱状图index
* barNub: 柱状图类型数量
*/
function createPathBar (option, l, start_x, _startY, bottomY, s, barNub) {
let _n;
for (var i = 0; i < barNub; i++) {
_n = i;
}
document.querySelector('.hover-line-' +s).style.setProperty('opacity', 1);
document.querySelector('#x-text-'+s).style.setProperty('fill', option.xAxis.font.hoverFontColor);
let rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
rect.setAttribute('width', `${option.series[l].normalStyle.width}`),
rect.setAttribute('height', _startY - bottomY);
rect.setAttribute('x', start_x + _n * option.series[l].normalStyle.width + _n * 2);
rect.setAttribute('y', bottomY);
rect.setAttribute('rx', `${option.series[l].normalStyle.borderRadius}`);
rect.setAttribute('ry', `${option.series[l].normalStyle.borderRadius}`);
rect.setAttribute('fill', `${option.series[l].normalStyle.backgroundColor}`);
rect.setAttribute('id', 'bar-'+l+'-'+s);
document.querySelector('#global-svg-'+_outId+' #path-g-container-'+l).appendChild(rect);
let _rectAnimate1 = document.createElementNS('http://www.w3.org/2000/svg', 'animate');
_rectAnimate1.setAttribute('attributeName', 'height');
_rectAnimate1.setAttribute('from', '0');
_rectAnimate1.setAttribute('to', _startY - bottomY);
_rectAnimate1.setAttribute('dur', '0.5s');
_rectAnimate1.setAttribute('repeatCount', '1');
// _rectAnimate1.setAttribute('fill', 'freeze');
document.querySelector('#global-svg-'+_outId+' #bar-'+l+'-'+s).appendChild(_rectAnimate1);
// 修改底部x轴文字位置
document.querySelector('#global-svg-'+_outId+' #x-text-'+s).setAttribute('x', start_x + option.series[l].normalStyle.width);
}
......@@ -250,10 +297,6 @@ function createPathLine(option, l, data, bottomY) {
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');
......@@ -270,7 +313,7 @@ function createPathLine(option, l, data, bottomY) {
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);
document.querySelector('#global-svg-'+_outId+' #path-g-container-'+l).appendChild(line);
// 折线图背景色数值
if (_isPathBg) {
......@@ -284,7 +327,7 @@ function createPathLine(option, l, data, bottomY) {
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);
document.querySelector('#global-svg-'+_outId+' #path-bg-g').appendChild(line_bg);
// 创建折线图显示背景颜色标签
......@@ -295,12 +338,12 @@ function createPathLine(option, l, data, bottomY) {
}
// //计算长度，实现动画
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');
let strokeLength = Math.ceil(document.querySelector('#global-svg-'+_outId+' #line-'+l).getTotalLength()); //获取折线图的长度
document.querySelector('#global-svg-'+_outId+' #path-g-container-'+l).style.setProperty('--stroke-length', strokeLength);
document.querySelector('#global-svg-'+_outId).classList.add('animate');
}
// 背景色显示的标签位置
// 折线图背景色显示的标签位置
function creatLinearGradient(id, bgColor, l) {
// 背景外层
let _linear = document.createElementNS('http://www.w3.org/2000/svg', 'linearGradient');
......@@ -310,7 +353,7 @@ function creatLinearGradient(id, bgColor, l) {
_linear.setAttribute('y1', '0%');
_linear.setAttribute('y2', '100%');
// _linear.setAttribute('style', 'fill-opacity: 0');
document.querySelector('#path-bg-color-g').appendChild(_linear);
document.querySelector('#global-svg-'+_outId+' #path-bg-color-g').appendChild(_linear);
// 背景颜色
let _colorData = [
......@@ -328,19 +371,17 @@ function creatLinearGradient(id, bgColor, l) {
}
// 背景动画
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');
......@@ -350,17 +391,41 @@ function creatLinearGradient(id, bgColor, l) {
_bgAnimate.setAttribute('repeatCount', '1');
_bgAnimate.setAttribute('fill', 'freeze');
// _stop.appendChild(_bgAnimate);
document.querySelector('#stop-'+l +'-1').appendChild(_bgAnimate);
document.querySelector('#global-svg-'+_outId+' #stop-'+l +'-1').appendChild(_bgAnimate);
}
// 数字换算
function _countFont(fontSize) {
let _diff = diffValue;
// return fontSize / _diff;
return fontSize;
}
// 鼠标移出
function hoverMouseout(event, s, option, outId) {
let _allEl = document.querySelector('#global-svg-'+outId).querySelectorAll('.hover-circle-' +s);
if (_allEl.length > 0) {
for (var i = 0; i < _allEl.length; i++) {
_allEl[i].style.setProperty('opacity', 0);
}
document.querySelector('#global-svg-'+outId).querySelector('.hover-line-' +s).style.setProperty('opacity', 0);
document.querySelector('#global-svg-'+outId).querySelector('#x-text-'+s).style.setProperty('fill', option.xAxis.font.color);
}
}
// 鼠标移入
function hoverMouseover(event, s, option, outId) {
let _allEl = document.querySelector('#global-svg-'+outId).querySelectorAll('.hover-circle-' +s);
if (_allEl.length > 0) {
for (var i = 0; i < _allEl.length; i++) {
_allEl[i].style.setProperty('opacity', 1);
}
document.querySelector('#global-svg-'+outId).querySelector('.hover-line-' +s).style.setProperty('opacity', 1);
document.querySelector('#global-svg-'+outId).querySelector('#x-text-'+s).style.setProperty('fill', option.xAxis.font.hoverFontColor);
}
}
//计算path值
function parsePath( data ) {
......
chart/chart.md
View file @ 999323fd
......@@ -96,6 +96,15 @@
circlestroke: '#87CEFA',
linestroke: '#f6f6f6'
}
},
{
type: 'bar', // bar: 柱状图
data: [0.75,0.1,0.7,1,0.26,0.3,0.9],
normalStyle: { // 柱状图常规样式
backgroundColor: '#953C96', // 柱状图颜色
width: 14, // 柱状宽度
borderRadius: 3 // 柱状圆角
},
}
]
}
......
line_demo.html → demo.html
View file @ 999323fd
......@@ -2,13 +2,18 @@
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>折线demo</title>
<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 id = 'tongline' width = '425' height = '236'></div>
</div>
<!-- 柱状图 -->
<div style = 'width:100%;height:400px;margin-top:100px;'>
<div id = 'tongbar' width = '425' height = '236'></div>
</div>
</body>
......@@ -17,7 +22,7 @@
let _width = document.body.clientWidth;
console.log(_width, '----');
// document.querySelector('#tongchart').setAttribute('width', _width);
var myChart = chart.init(document.getElementById('tongchart'));
var myChart = chart.init(document.getElementById('tongline'));
var option = {
animateTime: 3,
xAxis: {
......@@ -61,20 +66,71 @@
{
type: 'line',
smooth: true, // 是否是平滑曲线
data: [0.8,0.1,0.7,1,0.26,0.3,0.9],
data: [0.75,0.1,0.7,1,0.26,0.3,0.9],
normalStyle: {
linestroke: '#2A9BC5',
circlestroke: '#2A9BC5',
pathBgColor: '#2A9BC5'
linestroke: '#87CEFA',
circlestroke: '#87CEFA',
pathBgColor: '#87CEFA',
},
hoverStyle: {
circlestroke: '#87CEFA',
linestroke: '#f6f6f6'
}
}
},
]
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
myChart.setOption(option, 'tongline');
// 设置柱状图
var myChartBar = chart.init(document.getElementById('tongbar'));
var optionbar = {
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: 'bar',
data: [0.75,0.1,0.7,1,0.26,0.3,0.9],
normalStyle: {
backgroundColor: '#2A9BC5',
width: 14,
borderRadius: 3
},
},
{
type: 'bar',
data: [0.75,0.1,0.7,1,0.26,0.3,0.9],
normalStyle: {
backgroundColor: '#953C96',
width: 14,
borderRadius: 3
},
}
]
}
myChartBar.setOption(optionbar, 'tongbar');
</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