208 lines
4.3 KiB
JavaScript
208 lines
4.3 KiB
JavaScript
|
|
import React, { Component } from 'react';
|
|
import './Chart3.less'
|
|
import ReactECharts from 'echarts-for-react';
|
|
|
|
var colors = 'rgb(13, 119, 145)';
|
|
var fontColor = '#fff'
|
|
var lineColor = 'rgba(33, 50, 89,0.8)'
|
|
|
|
|
|
|
|
var datalist = [
|
|
{
|
|
name: "天津之眼",
|
|
value: [25, 85],
|
|
symbolSize: 30,
|
|
opacity: 0.6,
|
|
},
|
|
{
|
|
name: "天津之眼",
|
|
value: [100, 305],
|
|
symbolSize: 50,
|
|
opacity: 0.6,
|
|
},
|
|
{
|
|
name: "天津之眼",
|
|
value: [200, 525],
|
|
symbolSize: 70,
|
|
opacity: 0.6,
|
|
},
|
|
{
|
|
name: "天津之眼",
|
|
value: [255, 405],
|
|
symbolSize: 30,
|
|
opacity: 0.6,
|
|
},
|
|
{
|
|
name: "天津之眼",
|
|
value: [500, 705],
|
|
symbolSize: 50,
|
|
opacity: 0.6,
|
|
},
|
|
{
|
|
name: "天津之眼",
|
|
value: [400, 525],
|
|
symbolSize: 70,
|
|
opacity: 0.6,
|
|
},
|
|
{
|
|
name: "天津之眼",
|
|
value: [255, 405],
|
|
symbolSize: 30,
|
|
opacity: 0.6,
|
|
},
|
|
{
|
|
name: "天津之眼",
|
|
value: [700, 805],
|
|
symbolSize: 50,
|
|
opacity: 0.6,
|
|
},
|
|
{
|
|
name: "天津之眼",
|
|
value: [300, 425],
|
|
symbolSize: 70,
|
|
opacity: 0.6,
|
|
},
|
|
{
|
|
name: "天津之眼",
|
|
value: [365, 505],
|
|
symbolSize: 30,
|
|
opacity: 0.6,
|
|
},
|
|
{
|
|
name: "天津之眼",
|
|
value: [600, 705],
|
|
symbolSize: 40,
|
|
opacity: 0.6,
|
|
},
|
|
{
|
|
name: "天津之眼",
|
|
value: [400, 525],
|
|
symbolSize: 70,
|
|
opacity: 0.6,
|
|
},
|
|
{
|
|
name: "天津之眼",
|
|
value: [800, 925],
|
|
symbolSize: 30,
|
|
opacity: 0.6,
|
|
},
|
|
{
|
|
name: "天津之眼",
|
|
value: [900, 985],
|
|
symbolSize: 20,
|
|
opacity: 0.6,
|
|
},
|
|
|
|
];
|
|
var datas = [];
|
|
for (var i = 0; i < datalist.length; i++) {
|
|
var item = datalist[i];
|
|
const colorInex = i % colors.length;
|
|
|
|
datas.push({
|
|
...item,
|
|
label: {
|
|
normal: {
|
|
textStyle: {
|
|
fontSize: 11,
|
|
},
|
|
},
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: colors,
|
|
opacity: item.opacity,
|
|
},
|
|
},
|
|
});
|
|
}
|
|
|
|
|
|
|
|
class Chart3 extends Component {
|
|
|
|
getOption = () => ({
|
|
grid: {
|
|
show: false,
|
|
right: 15,
|
|
left: 10,
|
|
top: 10,
|
|
bottom: 10,
|
|
containLabel: true
|
|
},
|
|
xAxis: [
|
|
{
|
|
gridIndex: 0,
|
|
type: "value",
|
|
// show: false,
|
|
min: 0,
|
|
max: 1000,
|
|
nameLocation: "middle",
|
|
nameGap: 5,
|
|
axisLabel: {
|
|
show: true,
|
|
color: fontColor,
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: lineColor,
|
|
},
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: lineColor,
|
|
width: 0.5,
|
|
},
|
|
},
|
|
},
|
|
],
|
|
yAxis: [
|
|
{
|
|
gridIndex: 0,
|
|
min: 0,
|
|
// show: false,
|
|
max: 1000,
|
|
nameLocation: "middle",
|
|
nameGap: 30,
|
|
axisLabel: {
|
|
show: true,
|
|
color: fontColor,
|
|
},
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: lineColor,
|
|
},
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: lineColor,
|
|
width: 0.5,
|
|
},
|
|
},
|
|
},
|
|
|
|
],
|
|
series: [
|
|
{
|
|
type: "scatter",
|
|
symbol: "circle",
|
|
symbolSize: 120,
|
|
data: datas,
|
|
},
|
|
],
|
|
})
|
|
|
|
render() {
|
|
return (
|
|
<div className='ButtonChart1itemDetailBorder'>
|
|
<ReactECharts option={this.getOption()} style={{ width: '100%', height: '100%' }} />
|
|
</div >
|
|
);
|
|
}
|
|
}
|
|
|
|
export default Chart3;
|