学佛网站开发项目需求分析,遵义市播州区建设厅网站,四川做网站多少钱,工信部 网站备案材料 复印件 电子版说实话#xff0c;要说图表里#xff0c;最强的应该属于echarts了#xff0c;不管是接入难度上#xff0c;还是样式多样性上#xff0c;还有社区庞大程度上#xff0c;都是首屈一指的#xff0c;反观有的人习惯用chart.js了#xff0c;这个无可厚非#xff0c;但是如果…说实话要说图表里最强的应该属于echarts了不管是接入难度上还是样式多样性上还有社区庞大程度上都是首屈一指的反观有的人习惯用chart.js了这个无可厚非但是如果你刚开始研究我一定建议你直接用echarts吧。今天我已雷达图为例展示一下echarts雷达图的实现先看看运行截图吧然后我直接帖代码。 然后直接帖代码吧 先看模板代码很简单创建一个div就可以这里提一句百度实现echarts时底层是用canvas实现的但是我们引用直接给一个div就可以这点就比其他的图表库要好一些别的图表库都需要我们手动添加canvas div styledisplay: flex;justify-content: centerdiv refchart stylewidth: 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
