目錄

?

?

基本概念

代碼與實(shí)例

---

?

基本概念

在放json數(shù)組的時(shí)候，打印調(diào)試的時(shí)候不要使用alert，使用console.log進(jìn)行打印，如下圖：

alert截圖如下：

使用console.log

通過(guò)這種方式，就能對(duì)echarts進(jìn)行靈活的配置：

對(duì)比下這幾種方式：

?

?

代碼與實(shí)例

<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: {//開(kāi)始畫圖了drawLine(){if(this.dataValue.length != this.titleValue.length){alert("error the this.dataValue.length != this.titleValue.length");return;}// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例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);}// 指定圖表的配置項(xiàng)和數(shù)據(jù)let option = {tooltip: {trigger: 'item',formatter: "{a} <br/>{b}: {c} (ozvdkddzhkzd%)"},legend: {orient: 'vertical',x: 'left',//data:['直接訪問(wèn)','郵件營(yíng)銷','聯(lián)盟廣告','視頻廣告','搜索引擎']data: this.titleValue},series: [{name:'訪問(wèn)來(lái)源',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}]};// 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。myChart.setOption(option);}}} </script>

?

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。