一、vue中集成echarts
npm install echarts -S // 安装
import echarts from 'echarts' // src/main.js 引入包
Vue.prototype.$echarts = echarts // 绑定包至vue
drawBarChart() {
let barChart = this.$echarts.init(document.getElementById("barChart")); // 初始化实例
let option = { ... };
barChart.setOption(option);
}
// cerated 中的某个 接口函数成功后调用
this.$nextTick(() => {
this.drawChartOne(); // mounted 中调用这一句即可
})
二、react中集成echarts
import echarts from 'echarts'
// dom 准备
<div className="content" id="chart02"></div>
// 初始换构建饼图准备
initChart02 = () => {
const { chart02Data } = this.state
let yData = []
if (chart02Data && chart02Data.length>0) {
chart02Data.forEach(itm => {
yData.push(itm.name)
})
} else{
return
}
// 基于准备好的dom，初始化echarts实例
let chart02 = echarts.init(document.getElementById('chart02'))
const option02 = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
}
},
grid: {
top: '4%',
left: '2%',
right: '6%',
bottom: '0%',
containLabel: true
},
xAxis: {
min: 0,
minInterval: 1,
axisLabel: {
rotate: 45,
color: '#fff',
fontSize: 16
},
axisLine: {
lineStyle: {
color: '#222c3d'
}
},
splitLine: {
lineStyle: {
color: '#222c3d' // 分割线颜色
}
}
// inverse: true
},
yAxis: {
type: 'category',
data: yData,
offset: [8],
axisLabel: {
color: '#fff',
fontSize: 16
},
axisLine: {
lineStyle: {
color: '#222c3d'
}
}
},
series: [
{
name: '人数',
type: 'bar',
stack: 'total',
label: {
distance: 8,
normal: {
show: true, // 开启显示柱图上数据
padding: [0, 0, 0, 0],
position: ['50%', '25%'],
fontSize: 18,
fontWeight: 700,
lineHeight: 18,
color: '#fff',
}
},
emphasis: {
focus: 'series'
},
data: chart02Data || chart02DataCopy,
barWidth: 24,
itemStyle: {
label: {
show: true
},
labelLine: {
show: false
},
color: params => {
const colors01 = [
{ offset: 0, color: 'rgba(16,44,89,1)' }, //深蓝色
{ offset: 1, color: 'rgba(91,147,208,1)' } // 浅蓝色
]
const colors02 = [
{ offset: 0, color: 'rgba(42,34,36,0.9)' },
{ offset: 1, color: 'rgba(188,113,58,1)' } // 深咖色
]
if (params.dataIndex === params.length) {
return new echarts.graphic.LinearGradient(0, 0, 1, 0, colors02)
} else {
return new echarts.graphic.LinearGradient(0, 0, 1, 0, colors01)
}
},
borderColor: 'rgba(76,124,174,.1)'
}
}
]
}
chart02.setOption(option02)
}
三、图表最常用配置
// 最常用配置
const option = {
title: {
text: title,
x: 'center', y: '20px',
textStyle: { fontSize: 20, fontWeight: 700, color: '#fff'}
},
grid: {
left: '8%', top: '13%', right: '4%', bottom: '3%',
containLabel: true
},
tooltip: {
trigger: 'item',
formatter: '{b} {c}件',
textStyle: { fontSize: 20 }
}
}
四、柱图相关的一些细节
1. xy轴样式
const option = {
// 文字超出...代替
axisLabel: {//关键代码
show:true,
interval: 0, //强制所有标签显示
rotate: 40, // 解决x轴文字长度不同 显示不全的问题
formatter(params){
return `${params.substring(0,6)}...`; // 文字超出用...代替
},
textStyle: {
color: '#9eb1f1',
color(params) { // 当指定柱子被选中时 字体变色
return rankBarSelect === params ? '#15a5d8' : '#ffffff'
}
fontSize: 16
}
},
// 分割线颜色、字体、轴线颜色
xAxis: {
type: 'value',
scale: true,
boundaryGap: false,
splitLine: {
lineStyle: { color: '#25539e' } // x轴分隔线颜色
},
axisTick: { show: false },
axisLine: { show: false },
axisLabel: { ... }
},
}
// 其它
state={ rankBarSelect:'' } // 柱状图选中状态
onEchartClick = e => {
this.setState({
rankBarSelect: e.name
})
}
2.横向/纵向缩放条dataZoom
// 示例:
const start = 101 - Math.floor((15 / 655) * 100) // 655为柱图数据长度
console.log(start) // 99 start最大值99与end100 最接近
const option = {
dataZoom: [
{
show: true,
type: 'slider',
textStyle: {
show: false,
color: '#ffffff',
fontSize: 20
},
dataBackground: {
lineStyle: {
color: 'red',
width: 2
},
areaStyle: {
color: 'yellow',
opacity: 0.7
}
},
xAxisIndex: [0], // 横向 纵向-yAxisIndex
showDataShadow: 'auto',
zoomLock: true,
showDetail: false,
start: 0, // start 柱图数据越多 start与end的数值越接近
end: 30,
// start: 94, 纵向滚动条 倒序时这么配置,拖拽条可以从上往下拉，默认从0开始会从下往上拉 99为最大值
// end: 100,
left: 50, // 距离左侧
bottom: 20 // 距离底部
// top: 20,
// bottom: 20
},
{
show: true,
type: 'inside',
zoomLock: true,
yAxisIndex: [0]
}
]
}
// 数据量小的话 不显示拖柄
if (rankListY.length <= 18) {
dataZoomOption = null
} else if (rankListY.length >= 19 && rankListY.length <= 36) {
dataZoomOption = DataZoomSeting36
} else if (rankListY.length >= 37 && rankListY.length <= 72) {
dataZoomOption = DataZoomSeting72
} else if (rankListY.length >= 73 && rankListY.length <= 108) {
dataZoomOption = DataZoomSeting108
} else if (rankListY.length > 109) {
dataZoomOption = DataZoomSeting
}
注意：同一个页面的多个柱图需要单独配置，不可在一个option中配
// 注意：同一个页面的多个柱图需要单独配置，不可在一个option中配
export const DataZoomSeting = [
{
show: true,
type: 'slider',
textStyle: {
show: false,
color: '#ffffff',
fontSize: 20
},
dataBackground: {
lineStyle: {
color: 'red',
width: 2
},
areaStyle: {
color: 'yellow',
opacity: 0.7
}
},
yAxisIndex: [0],
showDataShadow: 'auto',
zoomLock: true,
showDetail: false,
start: 95,
end: 100,
left: 10,
top: 60
},
{
show: true,
type: 'inside',
zoomLock: true,
yAxisIndex: [0]
}
]
export const DataZoomSeting36 = [
{
show: true,
type: 'slider',
textStyle: {
show: false,
color: '#ffffff',
fontSize: 20
},
dataBackground: {
lineStyle: {
color: 'red',
width: 2
},
areaStyle: {
color: 'yellow',
opacity: 0.7
}
},
yAxisIndex: [0],
showDataShadow: 'auto',
zoomLock: true,
showDetail: false,
start: 50,
end: 100,
left: 10,
top: 60
},
]
export const DataZoomSeting72 = [
{
show: true,
type: 'slider',
textStyle: {
show: false,
color: '#ffffff',
fontSize: 20
},
dataBackground: {
lineStyle: {
color: 'red',
width: 2
},
areaStyle: {
color: 'yellow',
opacity: 0.7
}
},
yAxisIndex: [0],
showDataShadow: 'auto',
zoomLock: true,
showDetail: false,
start: 75,
end: 100,
left: 10,
top: 60
}
]
export const DataZoomSeting108 = [
{
show: true,
type: 'slider',
textStyle: {
show: false,
color: '#ffffff',
fontSize: 20
},
dataBackground: {
lineStyle: {
color: 'red',
width: 2
},
areaStyle: {
color: 'yellow',
opacity: 0.7
}
},
yAxisIndex: [0],
showDataShadow: 'auto',
zoomLock: true,
showDetail: false,
start: 88,
end: 100,
left: 10,
top: 60
}
]
3.数据显示在柱图上边或右边
// 柱图设置圆角
series: [
{
name: '***',
type: 'bar',
barWidth: 25,
itemStyle: {
normal: {
// 当前选中的柱子使用亮色，其余的使用基本颜色
// color(param) {
// return param.name === rankBarSelect ? '#15a5d8' : ' #ebb444'
// },
color: params => {
const colors = [
'#10a0e3', '#10a0e3', '#10a0e3', '#01cee1', '#e5c80c',
'#fe5d27' // 第1名颜色
]
return colors[params.dataIndex]
},
barBorderRadius: [0, 30, 30, 0] // 给柱图设置圆角
},
// shadowColor: '#000',
shadowBlur: 0,
shadowOffsetY: 0,
shadowOffsetX: 0,
borderWidth: 1,
},
label: {
normal: {
show: true,
position: 'insideRight', // 数据显示在柱图 内部右侧
offset: [-20, 0], // 偏移水平 垂直
formatter: '{c}',
textStyle: {
align: 'center',
baseline: 'middle',
fontSize: 14,
fontWeight: '400',
color: '#fff',
textShadowColor: '#000',
textShadowBlur: '0',
textShadowOffsetX: 1,
textShadowOffsetY: 1
}}
},
data: [3387,4530,4750,5951,6167,6398,6817,8392,10737,11476] // 柱子数据
}]
// 柱状图选中状态
state={ rankBarSelect:'' }
onEchartClick = e => {
this.setState({
rankBarSelect: e.name
})
}
最简易配置
// 最简易配置
series: [
{
type: 'bar',
// barWidth: '60%',
barWidth: 20,
data: arr[1],
label: {
show: true,
color: '#ffffff',
fontSize: 16,
position: 'top' // 数据显示在柱图上边
}
}
]
五、liquidFill水球配置
getshuiqiuOption = value => {
return {
series: [{
type: 'liquidFill',
radius: '78%', // 控制内部水球大小
center: ['50%', '50%'],
data: [value, 0.5, 0.5], // data个数代表波浪数
// label: { show: false },
backgroundStyle: {
borderWidth: 1,
color: 'rgb(255,0,255,0.1)'
},
outline: { show: false }
},
{
type: 'pie',
center: ['50%', '50%'],
radius: ['90%', '95%'], // 控制外圆大小
hoverAnimation: false,
data: [
{ name: '',
value: 500,
labelLine: { show: false},
itemStyle: {color: '#0e3673'},
emphasis: {
labelLine: { show: false },
itemStyle: { color: '#0e3673' }
} } ]
}]}}
<ReactEcharts
option={this.getshuiqiuOption('0.56')}
style={{ height: '100%', width: '100%' }}
/>
六、其它
后续待补充.
