本博文主要是记录一下在实现折柱图的过程中遇到的一些问题,由于对echarts使用不熟悉,在一些效果点产生了纠结。记录点如下:
1、折线图的实心圆点和颜色设置。设置itemStyle.normal.color
2、图例组件不显示。缺少legend的引入。
3、折线的区域面积颜色填充。设置areaStyle
4、柱状图重叠属性。 设置barGap: '-100%', 使柱体重叠在一起显示
5、柱状图堆叠属性。stack值相同的情况下,柱体会堆叠在一起
6、yAxisIndex设置的 Y轴的 index,不设置则折线图会被放大两倍。
7、设置折线图折线点的形状、是否实心和大小。 symbol: 'circle', smooth: true, symbolSize: 5,
8、设置折线图折线的样式。lineStyle
9、设置柱形图的柱子的宽度。barWidth
10、X轴文本旋转角度。rotate: 45
父组件:
<RGS seriesData={this.state.rgsData}
xAxisData={this.state.rgsXAxis} />
子组件:
import React, { Component } from 'react';
import echarts from 'echarts/lib/echarts';
import "echarts/lib/chart/bar";
import "echarts/lib/chart/line";
import "echarts/lib/component/tooltip";
import "echarts/lib/component/title";
import "echarts/lib/component/legend";
import '../../stylus/charts/charts-com.less';
interface Props {
seriesData: {},
xAxisData: []
}
type StateType = {
seriesData: any,
xAxisData: []
}
class RainGearSale extends Component<Props, StateType> {
constructor(props) {
super(props);
console.log('props', props);
this.state = {
seriesData: this.props.seriesData,
xAxisData: this.props.xAxisData
}
}
componentWillMount() {
// 渲染前
console.log('Component WILL MOUNT!')
}
componentDidMount() {
// 渲染后
let option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'none',
lineStyle: {
color: 'transparent'
}
},
},
legend: {
data: [{
name:'雨衣', itemWidth: 10,
textStyle:{
color: '#4B52F1'
}
}, '雨伞', '销售金额'],
itemGap:20,
height: 60,
top: 0,
left: 0,
padding: [0, 0, 20, 0],
},
grid: {
left: 30
// containLabel: true
},
xAxis: [
{
type: 'category',
data: this.state.xAxisData,
axisTick: {
show: false
},
splitLine: {
show: false,
},
axisLabel: {
fontSize: 12,
show: true,
color: "#333",
fontFamily: '"PingFangSC-Regular", "Microsoft YaHei"',
// rotate: 45
},
axisLine: {
show: true,
lineStyle: {
color: 'rgba(0,0,0,0.02)'
}
}
}
],
yAxis: [
{
type: 'value',
name: '单位:亿',
min: 0,
max: 20,
interval: 5,
axisLabel: {
formatter: '{value}'
},
axisTick: {
show: false,
alignWithLabel: true
},
axisLine: {
show: true,
lineStyle: {
// color: '#e3e3e3'
}
},
textStyle: {
color: "rgba(0,0,0,1)"
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: 'rgba(0,0,0,1)'
}
}
},
{
type: 'value',
name: '单位:%',
min: 0,
max: 100,
interval: 25,
axisLabel: {
formatter: '{value}'
}
},
],
series: [
{
name: '雨衣',
type: 'bar',
stack: "销售量", // stack值相同的情况下,柱体会堆叠在一起
// barGap: '-100%',
barWidth: 12,
itemStyle: {
color: 'rgb(120,99,52)',
borderWidth: 1
},
data: this.state.seriesData.yy
},
{
name: '雨伞',
type: 'bar',
stack: "销售量",
// barGap: '-100%', // 使柱体重叠在一起显示
barWidth: 12,
itemStyle: {
color: 'rgb(247,192,82)', //"#e6a23c",
borderWidth: 1
},
data: this.state.seriesData.ys
},
{
name: '销售金额',
type: 'line',
yAxisIndex: 1,
symbol: 'circle',
smooth: true,
symbolSize: 5,
itemStyle: {
normal: {
color: 'rgb(245,191,85)',// "#CEDCFE", //改变折线点的颜色
lineStyle: {
color: 'rgb(245,191,85)', //改变折线颜色
},
},
},
lineStyle: {
color: 'rgb(245,191,85)',
type:'solid'
},
areaStyle: { // 区域样式
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgb(245,191,85)',
}, {
offset: 1,
color: '#fff'
}]),
},
data: this.state.seriesData.xs
}
]
};
let myChart = echarts.init(document.getElementById('one'));
myChart.setOption(option);
console.log('myChart', myChart.getOption());
window.addEventListener("resize", myChart.resize);
}
render() {
return (
<div className="rain-gear-sale">
<h1>雨具销售量</h1>
<div className="chart-area">
<div id="one" className='canvasBox'></div>
</div>
</div>
);
}
}
export default RainGearSale;
画布样式:
.rain-gear-sale{
100%;
.canvasBox{
800px;
height: 600px;
padding: 10px;
box-sizing: border-box;
}
}