网站提供入口,wordpress for unity,惠州做网站乐云seo,百度知道电脑版网页入口文章目录 前言代码实现实现效果总结 前言
最近项目有做数据可视化 大屏 不免再次使用些echarts应用 记录下其中echarts雷达图的实现 代码实现
先上代码
templatediv classcontainerdiv refchart stylewidth: 500px; heig… 文章目录 前言代码实现实现效果总结 前言
最近项目有做数据可视化 大屏 不免再次使用些echarts应用 记录下其中echarts雷达图的实现 代码实现
先上代码
templatediv classcontainerdiv refchart stylewidth: 500px; height: 500px; margin-top: 20px/div/div
/templatescript
export default {name: testDemo,data() {return {};},methods: {initChart() {this.chart this.$echarts.init(this.$refs.chart);const option {color: [#FFC481, #8EC6F8, #56D8CD],title: {x: center,y: center,textStyle: {fontSize: 12,rich: {a: {color: #0066FF,fontSize: 18,align: center,},b: {color: #00BBFF,fontSize: 12,height: 16,align: centerc,},c: {color: orange,fontSize: 12,height: 16,align: center,},},},},// 配置图例legend: {},radar: {indicator: [{name: 资本背景, max: 100, min: 0, index: 0, axisLabel: {show: true}}, //显示刻度{name: 知识产权, max: 100, min: 0, index: 1},{name: 成长性, max: 100, min: 0, index: 2},{name: 风险状况, max: 100, min: 0, index: 3},{name: 经营质量, max: 100, min: 0, index: 4},{name: 企业规模, max: 100, min: 0, index: 5},],radius: 80, //大小startAngle: 120, // 雷达图的旋转偏移量splitNumber: 5, // 分层5层当前最大1000可理解为每层200triggerEvent: true,name: {formatter: (value, indicator) {// 获取对应的数值const valueAtIndex this.radarData[indicator.index];return {a|${value}}: {b|${valueAtIndex}}; // 显示名称和对应的数值},rich: {a: {color: #333,fontSize: 12,},b: {color: #333,fontSize: 12,},},},},textStyle: {color: #333333,},series: [{type: radar,areaStyle: {normal: {//添加阴影效果的配置部分color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0, color: rgba(255, 196, 129, 0.8)},{offset: 1, color: rgba(255, 196, 129, 0.3)},]),opacity: 0.8,},},data: [{value: [34,23,34,87,68,67],},],},],};this.chart.setOption(option);}},mounted() {// 等dom渲染后再初始化图表this.initChart()}
};
/scriptstyle scoped
/style
实现效果 总结
initChart方法中使用this.$echarts.init来初始化一个ECharts实例并设置图表的配置项option。这些配置项定义了图表的标题、提示框、雷达图的指标、名称的富文本样式、全局文本样式以及系列列表等。最后通过this.chart.setOption(option)将配置项应用到图表实例上
