前言：这篇文章创建于十个月之前的，现在都 2020-07-19 号了，之间差了快一年了，这期间我的技术栈成功的从 React => Vue => React ，真是技是人非，本来以为接触不到 echarts 了，没想到这个项目中又给用到了，想逃也逃不掉。😂
还有九天我就要转正了，真是开心的很，这是我大学毕业🎓之后第一次成为正式员工，现在来看无论是在北京还是在上海我都是在打酱油，不像现在对这这家公司比较满意，我打算最起码留个两三年，做人不能太飘了。当前这次转正除了工资能多发几千块钱，最重要的就是个人有很大的成长，尤其是感受最深的一点：无论什么都是有瑕疵的，你永远没办法有充分的准备去做到最好，任何人都是临危受命。 就比如我们朱镕基总理，他之前就没干过总理这个职位，临危受命，虽然只干了一届，但是干的很好。以前在学校真实啥都不要操心，出来工作你会发现，生活不止眼前的工作，有好多大事小事围绕在你的身边，例如：工作内容是否完成、技术没会的学会了吗、同事关系处理、租房啦、等等，整的我真是一个头两个大。但是事情发生了，不要怕，大胆的去处理，要学会在一天内同时处理不同的事，还不要让事情的负面情绪影响到你干其他的事情，于是慢慢你就轻车熟路，在变强的路上渐去渐远。
使用
我之前不想看 echarts 的原因就是感觉配置比较灵活，另一套语法，看着难受，这周二我对着文档研究了一天，对数据驱动视图体会是更加深入一层了。然后感觉就没啥难度了，就是对着文档找找就行了，真是爽，这里记录下常见配置。
一个折线图
import React, { Component } from "react";
import ReactDOM from "react-dom";
import echarts from "echarts";
class S2 extends Component {
componentDidMount() {
// 基于准备好的dom，初始化echarts实例
this.myChart = echarts.init(this.refs.main);
// 绘制图表
this.myChart.setOption({
// 柱状图的颜色
color: ["#12ccee"],
// 表的标题
title: {
text: "2019 年度销量",
subtext: "Sub Title",
// 标题的位置
left: "center",
top: "top",
textStyle: {
fontSize: 18,
// 主标题文字的颜色。
color: "#ee33aa",
},
subtextStyle: {
fontSize: 12,
// 主标题文字的颜色。
color: "#445533",
}
},
tooltip: {
// 鼠标悬停柱状图是否有hover提示效果
show: true,
// 在哪种类型触发
trigger: "axis",
// 指示器类型。
// 'line' 直线指示器
// 'shadow' 阴影指示器
// 'none' 无指示器
// 'cross' 十字准星指示器。其实是种简写，表示启用两个正交的轴的 axisPointer。
axisPointer: {
type: "cross"
}
},
// x轴的数据
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
// y轴的数据
yAxis: {},
// 柱状图的数据name名字，类型bar，数据为data
series: [{
name: "销量",
// 折线图line，柱状图bar,饼状图pie
type: "line",
data: [10, 22, 93, 45, 44, 100]
}]
});
}
render() {
return (
<div>
{/*作为初始化的DOM，必须给宽高*/}
<div ref="main" style={{ width: "500px", height: "300px" }} />
</div>
);
}
}
ReactDOM.render(
<S2 />,
document.getElementById("root")
);
改了下之前的代码，这时候 React 的字符串 ref 还是可以使用的，又是一个技是人非的例子。
再来看一个例子，不使用字符串 ref ，同时图表的数据也由 ECharts 3 的 series 提供变为 ECharts 4 中的 dataset 来提供，而且多列图表。
import React, { Component } from "react";
import ReactDOM from "react-dom";
import echarts from "echarts";
class S2 extends Component {
dom = React.createRef();
componentDidMount() {
const option = {
// 居中标题
title: {
text: '标题',
x: 'center'
},
// 调色盘颜色列表
color: ["#ffccee", "#006699", "#4cabce", "#e5323e"],
// 直角坐标系内绘图网格
grid: {
// 显示网格border
// show: true,
// grid 组件离容器左侧的距离。
left: 5,
right: 0,
top: 40,
bottom: 35,
// grid 区域是否包含坐标轴的刻度标签。
containLabel: true
},
dataset: {
source: [
["type", "2012", "2013", "2014", "2015", "2016"],
["Forest", 320, 332, 301, 334, 390],
["Steppe", 220, 182, 191, 234, 290],
["Desert", 150, 232, 201, 154, 190],
["Wetland", 98, 77, 101, 99, 40]
]
},
legend: {
bottom: 0
},
xAxis: {
type: 'category',
show: true,
// x 轴的位置。
position: "bottom",
// X 轴相对于默认位置的偏移
offset: 10,
// 坐标轴名称。
name: "x坐标轴名称",
// 坐标轴名称显示位置。
nameLocation: "end",
// 是否显示坐标轴刻度。
axisTick: {
show: false
},
axisLabel: {
// 是否显示刻度标签。
show: true,
textStyle: {
fontSize: 12,
color: "#998877"
}
},
axisLine: {
// 是否显示坐标轴轴线
show: true,
lineStyle: {
color: "#334455"
}
},
// 指示器类型。鼠标放上去的效果，line 也常用
axisPointer: {
type: "shadow"
},
data: null
},
yAxis: {
type: 'value',
axisTick: {
show: false
},
axisLabel: {
// 刻度标签旋转的角度，旋转的角度从 -90 度到 90 度。
// rotate: -45,
// 刻度标签与轴线之间的距离。
margin: 8,
// 刻度标签是否朝内，默认朝外。
inside: false,
textStyle: {
fontSize: 12,
color: "#ee6611"
},
// 刻度标签的内容格式器，支持字符串模板和回调函数两种形式。
formatter: '{value}%'
},
axisLine: {
show: false
},
splitLine: {
// 坐标轴在 grid 区域中的分隔线
show: true,
lineStyle: {
color: "#3311cc"
}
}
},
legend: {
show: true,
// 图例选择的模式，控制是否可以通过点击图例改变系列的显示状态。
selectedMode: true,
bottom: 0,
type: 'scroll',
width: '80%',
left: 'center',
textStyle: { color: '#4F5058' },
itemWidth: 8,
itemHeight: 8,
itemGap: 30,
pageIconSize: 12,
pageTextStyle: { color: '#4F5058' },
pageIconColor: '#4F5058',
pageIconInactiveColor: '#A4A4A4',
data: null
},
series: [
{
type: "bar",
// 数据到图形的映射
// 指定 dataset 的列（column）还是行（row）映射为图形系列（series）。默认是按照列（column）来映射。
seriesLayoutBy: "column"
},
{
type: "bar",
seriesLayoutBy: "column"
},
{
type: "bar",
seriesLayoutBy: "column"
},
{
type: "bar",
seriesLayoutBy: "column"
}
]
};
const myChart = echarts.init(this.dom.current);
myChart.setOption(option);
}
render() {
// 作为初始化的DOM，必须给宽高
return <div ref={this.dom} style={{ width: 600, height: 400 }} />
}
}
ReactDOM.render(
<S2 />,
document.getElementById("root")
);
当前时间 Sunday, July 19, 2020 22:37:09
网友评论