当前位置：首页 > news >正文

已实现：vue、h5项目如何使用echarts实现雷达图、六边形图表

news 来源：原创 2024/5/12 17:13:32

说实话，要说图表里，最强的应该属于echarts了，不管是接入难度上，还是样式多样性上，还有社区庞大程度上，都是首屈一指的，反观有的人习惯用chart.js了，这个无可厚非，但是如果你刚开始研究，我一定建议你直接用echarts吧。今天我已雷达图为例，展示一下echarts雷达图的实现，先看看运行截图吧，然后我直接帖代码。
在这里插入图片描述
然后直接帖代码吧
先看模板代码，很简单，创建一个div就可以，这里提一句，百度实现echarts时底层是用canvas实现的，但是我们引用直接给一个div就可以，这点就比其他的图表库要好一些，别的图表库都需要我们手动添加canvas：

          <div style="display: flex;justify-content: center"><div ref="chart" style="width: 30vw; height: 30vw;"></div></div>

然后直接来看js代码部分：

<script>
import * as echarts from 'echarts';export default {components: {backbButton,},data() {return {
// 使用 ECharts 初始化图表实例radarChart: null,
// 配置雷达图的参数option: {radar: {indicator: [{name: '听力', max: 100},{name: '口语', max: 100},{name: '阅读', max: 100},{name: '写作', max: 100},{name: '词汇', max: 100},{name: '句子', max: 100}],radius: '60%',  // 雷达图的半径splitLine: {lineStyle: {color: 'rgba(0, 0, 0, 0.1)',  // 设置网格线颜色},},axisLine: {lineStyle: {color: 'rgba(0, 0, 0, 0.10)',  // 设置轴线颜色},},axisLabel: {color: 'rgba(0, 0, 0, 0.7)',  // 设置文字颜色fontWeight: 'bold',},name: {textStyle: {color: 'rgba(0, 0, 0, 0.8)',  // 设置指标名称的文字颜色fontWeight: 'bold',},},},series: [{type: 'radar',data: [{value: [80, 60, 70, 90, 50, 75],name: '雷达图示例',itemStyle: {borderColor: 'rgba(255, 177, 26, 1)',  // 设置线条颜色color: 'rgba(255, 177, 26, 1)',  // 设置点的颜色},areaStyle: {color: 'rgba(248, 190, 64, 0.27)',  // 设置区域填充颜色},}]}]},}},mounted() {this.radarChart = echarts.init(this.$refs.chart)
// 将配置项设置给图表实例this.radarChart.setOption(this.option);},methods: {}
}
</script>

我将vue组件里所有js都贴出来了，以便大家伸手即用，里面的属性有注释，还有很多没贴出来的，大家可以搜一下，我只贴一些官方文档上说不清楚的地方，至于属性这里还是去看文档吧。属性太多了，我也稀里糊涂地用，大家也可以直接看他官网的示例。这里是官网链接，链接有时效性，可能时间久了就换地址了，如果不能用可以直接百度搜索吧。https://echarts.apache.org/examples/zh/index.html#chart-type-line