目錄

?

?

基本概念

代碼與實例

---

?

基本概念

在放json數組的時候，打印調試的時候不要使用alert，使用console.log進行打印，如下圖：

alert截圖如下：

使用console.log

通過這種方式，就能對echarts進行靈活的配置：

對比下這幾種方式：

?

?

代碼與實例

<template><div style="width: 500px; height:300px"></div> </template><script>export default {props: {dataValue: {type: Array,required: true},titleValue: {type: Array,required: true},idStr:{type: "",required: true}},mounted(){this.drawLine();},methods: {//開始畫圖了drawLine(){if(this.dataValue.length != this.titleValue.length){alert("error the this.dataValue.length != this.titleValue.length");return;}// 基于準備好的dom，初始化echarts實例let myChart = this.$echarts.init(document.getElementById(this.idStr));let showData = [];for(let i = 0; i < this.dataValue.length; i++){let jsonData = {"value": this.dataValue[i], "name": this.titleValue[i]};showData.push(jsonData);}// 指定圖表的配置項和數據let option = {tooltip: {trigger: 'item',formatter: "{a} <br/>{b}: {c} (ze8trgl8bvbq%)"},legend: {orient: 'vertical',x: 'left',//data:['直接訪問','郵件營銷','聯盟廣告','視頻廣告','搜索引擎']data: this.titleValue},series: [{name:'訪問來源',type:'pie',radius: ['50%', '70%'],avoidLabelOverlap: false,label: {normal: {show: false,position: 'center'},emphasis: {show: true,textStyle: {fontSize: '30',fontWeight: 'bold'}}},labelLine: {normal: {show: false}},data: showData}]};// 使用剛指定的配置項和數據顯示圖表。myChart.setOption(option);}}} </script>

?

總結

以上是生活随笔為你收集整理的前端笔记-JavaScript中放json数组要注意的地方（构造灵活的echarts）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。