基本概念

在放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} ({d}%)"},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）相关推荐

JavaScript对JSON数组操作。数组添加（push）以及移除（splitce）
这里写一个小栗子提供给大家学习和纪录. js声明数组以及向数组中添加as移除json数据 JavaScript声明JSON数组的方法: //部分条件,在数据渲上数据要求是数组格式而非json数组格 ...
JavaScript——将json数组填充进excel表并下载保存
今天遇到的一个问题就是,获取到猫眼电影票房总榜的数据后,怎么把他们填充进excel中? 本文参考了另一篇博客,地址如下: https://blog.csdn.net/qq_34623560/artic ...
前台传json ajax,ajax使用json数组------前端往后台发送json数组及后台往前端发送json数组...
1.引子 2.前端往后台传输json数据 JSON.stringify()方法将json对象转为字符串形式.如果不使用**JSON.stringify()**方法,后台的java代码将不能获得json ...
javascript解析json数组
最近写一个程序时,遇到js解析json数组的问题,现在记录如下,供我自己和拥有同样爱好的读者看看. 第一中情况: javaweb后台传到前台的json数据如下: {"data":[ ...
Web前端笔记-通过Thymeleaf把数组传输给echarts并显示曲线图
目录最终结果过程最终结果截图如下: 这里的数据都是从Mysql数据库中直接读取到的,下面演示下过程,把后端的数据通过Thymeleaf,把数组传输给前端的JS. 过程这里曲线的存储结构是这样 ...
如何利用JavaScript遍历JSON数组
for(var json in jsonArray) { for(var key in jsonArray[json]) { inputText += jsonArray[json][key]+&qu ...
js遍历json数组给html td赋值,JS实现给json数组动态赋值的方法示例
关注微信公众号 JS实现给json数组动态赋值的方法示例转载更新时间:2017年07月04日 10:19:00 作者:小魏的马仔这篇文章主要介绍了JS实现给json数组动态赋值的方法,结合 ...
前端笔记知识点整合之JavaScript（五）关于数组和字符串那点事
前端笔记知识点整合之JavaScript(五)关于数组和字符串那点事一.数组 1.1数组概念数组(array)是一个有序的数据集合.说白了,数组就是一组数.数组内部可以存放一个或多个单独的数据,整 ...
Web前端 Javascript笔记（1）数组
结构 :html构建样式:css控制行为:JavaScript实现什么是JavaScript? JavaScript是一种跨平台的脚本语言,平台,即运行环境,一般指操作系统. --------- ...

前端笔记-JavaScript中放json数组要注意的地方（构造灵活的echarts）

基本概念

代码与实例

前端笔记-JavaScript中放json数组要注意的地方（构造灵活的echarts）相关推荐

最新文章

热门文章