Echarts中怎么简单的找错误？

最新推荐文章于 2023-07-26 10:30:00 发布
最新推荐文章于 2023-07-26 10:30:00 发布
阅读量1.0k 收藏 1
点赞数
分类专栏： 技术--开发类
本文为博主原创文章，未经博主允许不得转载。
本文链接：https://blog.csdn.net/qq_30546099/article/details/71195370
版权
     1、在记事本中写好代码
eg：（写的是你没有发现的错误的代码）
?<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height:400px"></div>
    <!-- ECharts单文件引入 -->
    <script src="../dist/echarts.js"></script>
    <script type="text/javascript">

        // 路径配置
        require.config({
            paths: {
                echarts: '../dist'
            }
        });
        
        // 使用
        require(
            [
                'echarts',
                'echarts/chart/gauge'
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('main'));         
                option = {
    backgroundColor: '#1b1b1b',
    tooltip : {
        formatter: "{a} <br/>{c} {b}"
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    series : [
        {
            name:'速度',
            type:'gauge',
            min:0,
            max:220,
            splitNumber:11,
            axisLine: {            // 坐标轴线
                lineStyle: {       // 属性lineStyle控制线条样式
                    color: [[0.09, 'lime'],[0.82, '#1e90ff'],[1, '#ff4500']],
                    width: 3,
                    shadowColor : '#fff', //默认透明
                    shadowBlur: 10
                }
            },
            axisLabel: {            // 坐标轴小标记
                textStyle: {       // 属性lineStyle控制线条样式
                    fontWeight: 'bolder',
                    color: '#fff',
                    shadowColor : '#fff', //默认透明
                    shadowBlur: 10
                }
            },
            axisTick: {            // 坐标轴小标记
                length :15,        // 属性length控制线长
                lineStyle: {       // 属性lineStyle控制线条样式
                    color: 'auto',
                    shadowColor : '#fff', //默认透明
                    shadowBlur: 10
                }
            },
            splitLine: {           // 分隔线
                length :25,         // 属性length控制线长
                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                    width:3,
                    color: '#fff',
                    shadowColor : '#fff', //默认透明
                    shadowBlur: 10
                }
            },
            pointer: {           // 分隔线
                shadowColor : '#fff', //默认透明
                shadowBlur: 5
            },
            title : {
                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                    fontWeight: 'bolder',
                    fontSize: 20,
                    fontStyle: 'italic',
                    color: '#fff',
                    shadowColor : '#fff', //默认透明
                    shadowBlur: 10
                }
            },
            detail : {
                backgroundColor: 'rgba(30,144,255,0.8)',
                borderWidth: 1,
                borderColor: '#fff',
                shadowColor : '#fff', //默认透明
                shadowBlur: 5,
                offsetCenter: [0, '50%'],       // x, y，单位px
                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                    fontWeight: 'bolder',
                    color: '#fff'
                }
            },
            data:[{value: 40, name: 'km/h'}]
        },
        {
            name:'转速',
            type:'gauge',
            center : ['25%', '55%'],    // 默认全局居中
            radius : '50%',
            min:0,
            max:7,
            endAngle:45,
            splitNumber:7,
            axisLine: {            // 坐标轴线
                lineStyle: {       // 属性lineStyle控制线条样式
                    color: [[0.29, 'lime'],[0.86, '#1e90ff'],[1, '#ff4500']],
                    width: 2,
                    shadowColor : '#fff', //默认透明
                    shadowBlur: 10
                }
            },
            axisLabel: {            // 坐标轴小标记
                textStyle: {       // 属性lineStyle控制线条样式
                    fontWeight: 'bolder',
                    color: '#fff',
                    shadowColor : '#fff', //默认透明
                    shadowBlur: 10
                }
            },
            axisTick: {            // 坐标轴小标记
                length :12,        // 属性length控制线长
                lineStyle: {       // 属性lineStyle控制线条样式
                    color: 'auto',
                    shadowColor : '#fff', //默认透明
                    shadowBlur: 10
                }
            },
            splitLine: {           // 分隔线
                length :20,         // 属性length控制线长
                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                    width:3,
                    color: '#fff',
                    shadowColor : '#fff', //默认透明
                    shadowBlur: 10
                }
            },
            pointer: {
                width:5,
                shadowColor : '#fff', //默认透明
                shadowBlur: 5
            },
            title : {
                offsetCenter: [0, '-30%'],       // x, y，单位px
                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                    fontWeight: 'bolder',
                    fontStyle: 'italic',
                    color: '#fff',
                    shadowColor : '#fff', //默认透明
                    shadowBlur: 10
                }
            },
            detail : {
                //backgroundColor: 'rgba(30,144,255,0.8)',
               // borderWidth: 1,
                borderColor: '#fff',
                shadowColor : '#fff', //默认透明
                shadowBlur: 5,
                width: 80,
                height:30,
                offsetCenter: [25, '20%'],       // x, y，单位px
                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                    fontWeight: 'bolder',
                    color: '#fff'
                }
            },
            data:[{value: 1.5, name: 'x1000 r/min'}]
        },
        {
            name:'油表',
            type:'gauge',
            center : ['75%', '50%'],    // 默认全局居中
            radius : '50%',
            min:0,
            max:2,
            startAngle:135,
            endAngle:45,
            splitNumber:2,
            axisLine: {            // 坐标轴线
                lineStyle: {       // 属性lineStyle控制线条样式
                    color: [[0.2, 'lime'],[0.8, '#1e90ff'],[1, '#ff4500']],
                    width: 2,
                    shadowColor : '#fff', //默认透明
                    shadowBlur: 10
                }
            },
            axisTick: {            // 坐标轴小标记
                length :12,        // 属性length控制线长
                lineStyle: {       // 属性lineStyle控制线条样式
                    color: 'auto',
                    shadowColor : '#fff', //默认透明
                    shadowBlur: 10
                }
            },
            axisLabel: {
                textStyle: {       // 属性lineStyle控制线条样式
                    fontWeight: 'bolder',
                    color: '#fff',
                    shadowColor : '#fff', //默认透明
                    shadowBlur: 10
                },
                formatter:function(v){
                    switch (v + '') {
                        case '0' : return 'E';
                        case '1' : return 'Gas';
                        case '2' : return 'F';
                    }
                }
            },
            splitLine: {           // 分隔线
                length :15,         // 属性length控制线长
                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                    width:3,
                    color: '#fff',
                    shadowColor : '#fff', //默认透明
                    shadowBlur: 10
                }
            },
            pointer: {
                width:2,
                shadowColor : '#fff', //默认透明
                shadowBlur: 5
            },
            title : {
                show: false
            },
            detail : {
                show: false
            },
            data:[{value: 0.5, name: 'gas'}]
        },
        {
            name:'水表',
            type:'gauge',
            center : ['75%', '50%'],    // 默认全局居中
            radius : '50%',
            min:0,
            max:2,
            startAngle:315,
            endAngle:225,
            splitNumber:2,
            axisLine: {            // 坐标轴线
                lineStyle: {       // 属性lineStyle控制线条样式
                    color: [[0.2, 'lime'],[0.8, '#1e90ff'],[1, '#ff4500']],
                    width: 2,
                    shadowColor : '#fff', //默认透明
                    shadowBlur: 10
                }
            },
            axisTick: {            // 坐标轴小标记
                show: false
            },
            axisLabel: {
                textStyle: {       // 属性lineStyle控制线条样式
                    fontWeight: 'bolder',
                    color: '#fff',
                    shadowColor : '#fff', //默认透明
                    shadowBlur: 10
                },
                formatter:function(v){
                    switch (v + '') {
                        case '0' : return 'H';
                        case '1' : return 'Water';
                        case '2' : return 'C';
                    }
                }
            },
            splitLine: {           // 分隔线
                length :15,         // 属性length控制线长
                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                    width:3,
                    color: '#fff',
                    shadowColor : '#fff', //默认透明
                    shadowBlur: 10
                }
            },
            pointer: {
                width:2,
                shadowColor : '#fff', //默认透明
                shadowBlur: 5
            },
            title : {
                show: false
            },
            detail : {
                show: false
            },
            data:[{value: 0.5, name: 'gas'}]
        }
    ]
};

clearInterval(timeTicket);
timeTicket = setInterval(function (){
    option.series[0].data[0].value = (Math.random()*100).toFixed(2) - 0;
    option.series[1].data[0].value = (Math.random()*7).toFixed(2) - 0;
    option.series[2].data[0].value = (Math.random()*2).toFixed(2) - 0;
    option.series[3].data[0].value = (Math.random()*2).toFixed(2) - 0;
    myChart.setOption(option,true);
},2000)
                                  
                // 为echarts对象加载数据 
                myChart.setOption(option); 
            }
        );
    </script>
</body>
2、在编码器Brackets.exe中运行（或者直接用Google浏览器打开文件），会出现以下这种或者其它种的错误（运行不出来，白页面）
Echarts中怎么简单的找错误？ - 惊艳了谁的时光？ - 惊艳了谁的时光？
然后面对这种错误，单击右键出现 Echarts中怎么简单的找错误？ - 惊艳了谁的时光？ - 惊艳了谁的时光？，点击审查元素，后出现红色警告，则这就是运行不出来的原因。
Echarts中怎么简单的找错误？ - 惊艳了谁的时光？ - 惊艳了谁的时光？
Uncaught ReferenceError: timeTicket is not defined，显然警告说 timeTicke函数没有被定义，所以就理所应当的在代码中加上 timeTicke函数的定义。Var  timeTicke；
Echarts中怎么简单的找错误？ - 惊艳了谁的时光？ - 惊艳了谁的时光？
之后运行则成功：
Echarts中怎么简单的找错误？ - 惊艳了谁的时光？ - 惊艳了谁的时光？
 
 
 
  
付三三_
关注
专栏目录
echarts master 中的dist在20230210下载
02-13
7. **echarts.js.map** 和 **echarts.esm.js.map**: 这些是源代码映射文件，用于在开发过程中进行调试，当浏览器遇到错误时，可以将压缩后的代码映射回源代码，便于找出问题所在。 在实际项目中，开发者可以根据...
echarts 路径引用问题报错 net::ERR_ABORTED 404 (Not Found)
weixin_43942765的博客
08-02 2634
小编的页面文件在子文件夹下，所以小编在引用echarts的js时路径也就出现了一些问题。
vue 使用echarts出现 option报错 图表无法显示
10-28 2130
确认安装 npm install echarts -S main.js引入 import echarts from 'echarts' Vue.prototype.$echarts = echarts Vue.use(echarts) helloworld.vue import echarts from 'echarts'; 注意this.$echarts.init(this.$refs.bar); option报错改为let option就好了 Axios.get('static/json/test.
【踩坑】echarts部分代码不生效，代码一样效果不一样解决办法
seeeeeeeeeee的博客
07-30 4015
我遇到一个需求做一个柱形图排行榜功能，然后我就去echarts官网上找文档，经过查询找打了怎么做，我复制了代码过来公司项目，但是就是不生效，我就很奇怪，难倒是我有什么细节没写对，然后我就一直删代码添代码试了一个遍，发现还是没有效果，好家伙，我直接把代码原封不动的复制到了官echarts官网跑发现是我要得效果，然后我又复制到我自己做的demo项目里面跑一下发现也是我要得效果，这我就明白了，那就不是代码的问题，肯定是公司项目的某些环境影响我了。 然后我一看package.json里echarts才4.1.2版本
Echarts bar 设置yAxis interval不生效的问题
weixin_41569391的博客
06-04 2万+
    eCharts图表中Y轴的分段数太多，显示起来不太好看，需要减少分段的数量，一开始设置interval属性，可惜不生效，希望能有大牛帮忙解释下原因，代码如下：yAxis : [ { type : 'value', axisTick: { // 坐标轴小标记 show:false }, ...
echarts 调整x类目轴axisLabel间距
japlus的博客
07-24 4210
调整axisLabel.width 控制横坐标间距
echarts-5.4.3
03-02
ECharts 5.4.3 版本是该库的一个稳定版本，包含了之前版本的所有功能，并在性能优化、新特性添加、错误修复等方面进行了改进。 在 ECharts 5.4.3 中，我们可以关注以下几个重要的知识点： 1. **数据驱动**：...
apache-echarts-5.3.3下载资源
09-23
Apache ECharts 5.3.3 是 ECharts 的一个主要版本，它可能包含了对前一版本的错误修复、性能提升以及新功能的添加。比如，可能会有新的图表类型、更流畅的动画效果、更好的数据处理能力以及对不同设备和浏览器的...
免费echarts-5.4.3-dist
08-03
4. echarts.simple.js：简化版的ECharts，只包含了基本图表类型和最少的功能，适合对性能有较高要求或者需求简单的场景。 5. echarts.min.js、echarts.esm.min.js、echarts.common.min.js、echarts.simple.min.js：...
ASP.NET操作echarts
03-27
首先，我们需要在 ASP.NET 项目中引入 ECharts 的 JavaScript 库。通常，这可以通过在 HTML 页面的 `<head>` 标签中添加 ECharts 的 CDN 链接或者将 ECharts 的 js 文件下载到项目中本地引用。例如： ```html ...
Echarts报错总结（内含三种常见错误，看看有没有你心仪的）
weixin_46870848的博客
08-05 7439
echarts一般安装报错和大多数npm安装报错一样，哪怕和别人的报错不太一样，（像我是报了263个错），或者你的就是can't resolve "xxx",那么大概率是你安装的版本和你的框架等版本不合。由于echarts图表只有在dom渲染后，才可以进行初始化，所以此处不能在created里面初始化图表，异步请求图表数据，应该要在mounted()里面进行这步操作。解决方案：(vue2跟echarts现在最新的版本5字头在一起都会报错，故降低版本就好啦）（后者是清理echarts 但是不销毁实例）....
【ECharts】报错集合
joanmelon的博客
02-08 829
☀️大家好，我是宾果的救星~希望记录的学习和收获能够帮助大家在开发过程中得到思路并且解决难题。希望大家多多点赞~爱你们哟~
echarts图表出现得问题
一个有思想的新时代农民工的博客
06-03 625
1、柱状和折现叠加超出得问题 xAxis:{ type: 'category', data: dateList, name:"", boundaryGap: false, // }, 2、因为X轴类名太长导致不能显示全得问题 axisLabel: { show: true, textStyle: { color: '#BEC5D6' }, interval : 0, formatter : function(params){//*
解决 ECharts 报错 “Cannot read properties of null (reading ‘getAttribute‘)“ 的方法
pleaseprintf的博客
07-26 8662
在使用 ECharts 进行数据可视化时，有时会遇到错误信息 “Cannot read properties of null (reading ‘getAttribute’)”。这个错误通常发生在 ECharts 绘制图表时，指示某个元素为 null，导致无法读取属性。本文将详细介绍出现这个错误的原因，并提供解决方法，确保正确使用 ECharts，避免该错误的发生。
echarts中配置项splitNumber踩坑记录
weixin_42578774的博客
01-06 2万+
splitNumber不按照设置的数目来显示怎么办？项目问题记录踩坑记录合理使用boundaryGap\max 项目问题记录 项目中有九宫格式九个柱状图显示，要求y轴显示三条分割线，两个分割间隔。使用同一个option，却展示了不同的效果。 配置项: yAxis: { splitNumber:2 } 实例1: 数据为[0 , 261.69 , 290.51] 实例2： 数据为[0 , ...
ECharts地图详解
xieweikun7的博客
10-09 5万+
1.引入echarts库文件 2.在页面中新建div用于地图展示 3.在页面中引入js文件 4.在js脚本中编写代码 $(function() { // 路径配置 require.config({ paths : { // echarts: 'http://echarts.baidu.com/build/dist' echarts : './
记录使用echart遇到的错误
maple_leaf_red的博客
10-24 6180
记录使用echart遇到的错误
Vue使用echarts(完整版，解决各种报错)
热门推荐
geidongdong的博客
01-18 13万+
前言：Echarts，它是一个与框架无关的 JS 图表库，但是它基于Js，只要是基于JS、TS的框架基本都能使用它，例如Vue，估计IONIC也能用。这一节主要将Vue如何使用echarts，并且包含各种错误解决方法。
在vue项目中简单使用Echarts&第一次使用时的各种报错与解决
like896369216的博客
05-21 3603
关于echarts安装版本报错的解决办法，关于Uncaught (in promise) TypeError: Cannot read properties of null (reading 'getAttribute')错误的解决办法
如何查看 PyEcharts 是否成功导入并加载了 ECharts？
最新发布
10-12
要检查 `PyEcharts` 是否成功导入并加载了 ECharts，你可以执行以下几个步骤： 1. 首先，确保你的环境中已经安装了 `pyecharts` 和其对应的底层库 `echarts`。你可以通过运行 `pip list` 或 `conda list` 来查看已安装的包列表。 2. 使用 `import` 语句尝试导入 `pyecharts` 并查看是否有报错。例如： ```python try: import pyecharts.options as opts print("pyecharts成功导入") except ImportError: print("pyecharts未导入或安装有问题") ``` 如果没有报错，说明 `pyecharts` 已经正常导入。 3. 接下来，可以尝试创建一个简单的图表实例，看是否能正常生成。例如： ```python from pyecharts.charts import Bar bar = Bar() ``` 如果没有异常抛出并且图表没有显示任何错误信息，那么 `pyecharts` 应该已经正确加载了 ECharts。 4. 最后，你可以访问 ECharts 的官网或者查看官方文档，确保你的 ECharts 版本与 `pyecharts` 的预期版本相匹配。 如果在整个过程中遇到任何问题，可能是由于缺少必要的依赖或者安装版本不兼容导致的。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值