ECharts:一个基于 JavaScript 的开源可视化图表库。
目录
效果
一、介绍
1、官方文档:Apache ECharts
2、官方示例
二、准备工作
1、安装依赖包
npm install echarts --save
2、示例版本
"echarts": "^5.4.2",
三、使用步骤
1、在单页面引入 ' echarts '
import * as echarts from "echarts";
注:上面的代码会引入 ECharts 中所有的图表和组件,如果你不想引入所有组件,也可以使用 ECharts 提供的按需引入的接口来打包必须的组件。详见官方文档:在项目中引入 ECharts - 入门篇 - Handbook - Apache ECharts
2、指定容器并设置容器宽高
<template>
<div id="main"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
name: "mutiYAxis",
data() {
return {
};
},
methods: {
initChart() {
let data = this.data
let chartDom = document.getElementById("main");
let myChart = echarts.init(chartDom);
let option;
...详见完整示例
},
},
};
</script>
<style scoped>
#main {
width: 1000px;
height: 500px;
}
</style>
3、数据处理(关键点)
circle(radius, steps, centerX, centerY) {
var points = [];
for (var i = 0; i < steps; i++) {
// 根据圆的参数方程,计算每个点的x和y坐标
var x = centerX + radius * Math.cos(2 * Math.PI * i / steps);
var y = centerY + radius * Math.sin(2 * Math.PI * i / steps);
// 将每个点的坐标添加到数组中
if (x === 12 || x === -12) {
y = 0
}
if (y === 12 || y === -12) {
x = 0
}
points.push([x, y]);
}
return points;
}
四、完整示例
<template>
<div class="circularScatter">
<div id="main"></div>
</div>
</template>
<script>
import * as echarts from "echarts";
export default {
name: "circularScatter",
data() {
return {
result: {
scatterData: [
[10.0, 9.14],
[8.0, -8.14],
[-13.0, -8.74],
[9.0, 8.77],
[11.0, -9.26],
[14.0, 8.1],
[-6.0, -6.13],
[4.0, -3.1],
[-12.0, 9.13],
[7.0, 7.26],
[5.0, 4.74]
],
circleData: this.circle(12, 360, 0, 0)
},
};
},
mounted() {
this.$nextTick(() => {
this.initChart(this.result);
});
},
methods: {
initChart(data) {
let chartDom = document.getElementById("main");
let myChart = echarts.init(chartDom);
let option;
const { scatterData, circleData } = data;
if (scatterData === null || scatterData.length === 0 || circleData === null || circleData.length === 0) return;
option = {
title: {
text: "圆形散点图"
},
tooltip: {
trigger: "item",
formatter: function (params) {
if (params.seriesType === 'scatter') {
return "x: " + params.data[0] + ", y: " + params.data[1];
}
}
},
// xAxis 和 yAxis即使是空对象也务必要有,否则会有报错 Error in nextTick: "Error: xAxis "0" not found"
xAxis: {
min: -15,
max: 15
},
yAxis: {
min: -15,
max: 15
},
series: [
// 圆
{
type: "line",
data: circleData,
// 设置图形的形状和大小
symbol: "circle",
symbolSize: 2,
// 设置图形的样式
itemStyle: {
// 红色
color: "#FC5430",
opacity: 0.8,
borderColor: "#FC5430",
borderWidth: 2
}
},
// 散点
{
type: "scatter",
data: scatterData,
// 设置图形的形状和大小
symbol: "circle",
symbolSize: 6,
// 设置图形的样式
itemStyle: {
// 蓝色
color: "#1487F4",
opacity: 0.8,
borderColor: "#1487F4",
borderWidth: 1
}
}
]
}
option && myChart.setOption(option);
},
circle(radius, steps, centerX, centerY) {
var points = [];
for (var i = 0; i < steps; i++) {
// 根据圆的参数方程,计算每个点的x和y坐标
var x = centerX + radius * Math.cos(2 * Math.PI * i / steps);
var y = centerY + radius * Math.sin(2 * Math.PI * i / steps);
// 将每个点的坐标添加到数组中
if (x === 12 || x === -12) {
y = 0
}
if (y === 12 || y === -12) {
x = 0
}
points.push([x, y]);
}
return points;
}
},
}
</script>
<style lang="less" scoped>
#main {
width: 1000px;
height: 500px;
}
</style>
tips
1、xAxis 和 yAxis即使是空对象也务必要有,否则会有报错 Error in nextTick: "Error: xAxis "0" not found"
参考
Echarts 用散点图绘制一个圆_echarts画圆-CSDN博客
可完善:红色的圆的symbol: "circle"设置成symbol: "none"会无法闭合,还请各位大神赐教