Java自学者论坛

 找回密码
 立即注册

手机号码,快捷登录

恭喜Java自学者论坛(https://www.javazxz.com)已经为数万Java学习者服务超过8年了!积累会员资料超过10000G+
成为本站VIP会员,下载本站10000G+会员资源,会员资料板块,购买链接:点击进入购买VIP会员

JAVA高级面试进阶训练营视频教程

Java架构师系统进阶VIP课程

分布式高可用全栈开发微服务教程Go语言视频零基础入门到精通Java架构师3期(课件+源码)
Java开发全终端实战租房项目视频教程SpringBoot2.X入门到高级使用教程大数据培训第六期全套视频教程深度学习(CNN RNN GAN)算法原理Java亿级流量电商系统视频教程
互联网架构师视频教程年薪50万Spark2.0从入门到精通年薪50万!人工智能学习路线教程年薪50万大数据入门到精通学习路线年薪50万机器学习入门到精通教程
仿小米商城类app和小程序视频教程深度学习数据分析基础到实战最新黑马javaEE2.1就业课程从 0到JVM实战高手教程MySQL入门到精通教程
查看: 564|回复: 0

79、ECharts:基础知识与问题解决

[复制链接]
  • TA的每日心情
    奋斗
    4 天前
  • 签到天数: 802 天

    [LV.10]以坛为家III

    2053

    主题

    2111

    帖子

    72万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    726006
    发表于 2021-6-20 01:05:13 | 显示全部楼层 |阅读模式
    注意:Echarts图例的说明文字左侧左对齐,右侧右对齐。
    legend: {
      itemWidth: 12,
      itemHeight: 12,
      orient: 'vertical',
      width: 80,
      right: 20,
      formatter: function (name) {
        var value = 0;
        var emptyString = '';//图例说明文字左侧部分的字数不相等,就用它来填充至相等,它由一个到多个的'\u3000'和(或有或无的)一个'\u0020'组成。
        return name + emptyString + '\u3000' + '\u0020' + value;//前者汉字空格,可以重复使用,后者相反
      },
      data: deviceTypeText
    },
                  
    一、Echarts动态图实现思路
    1、这样写会报错:`setOption` should not be called during main process.
    ```javascript
    var option={title:myTitle};/*原始配置*/
    clearInterval(timeTicket);
    var timeTicket = setInterval(function (){
        /*此处向后台发送请求并获取返回值*/
        myTitle =result[0];
        myChart.setOption(option);
    },500);
    ```
    2、这样写不会报错
    ```javascript
    var option={};/*原始配置*/
    clearInterval(timeTicket);
    var timeTicket = setInterval(function (){
        /*此处向后台发送请求并获取返回值*/
        option.series[0].data[0].value =result[0];
        myChart.setOption(option);
    },500);
    ```
    3、这样写不会报错
    ```javascript
    clearInterval(timeTicket);
    var timeTicket = setInterval(function (){
        /*此处向后台发送请求并获取返回值*/
        var option = myChart.getOption();/*实例获取*/
        option.series[0].data[0].value = result[0];
        myChart.setOption(option);
    },500);
    ```
    二、定时更新数据的多图表实现思路(在angular1框架中使用)方法一:
    1、初始化,
    (1)通过多次执行var oneChart = echarts.init(document.getElementById(id)),获取多个实例并把实例放进数组myArray里;
    (2)多次定义配置项var oneOption = {};
    (3)用angular.forEach(myArray,function(item){ item.setOption(oneOption); })获取多图表;
    (4)执行获取数据函数,获取返回值
    2、定时执行获取数据函数 $scope.myInterval=$interval(function () { getData() }, 3000);
    3、定义获取数据函数getData
    ```javascript
    $scope.getData=function(){
       /*1、发送请求
         2、获取返回值result
         3、择出所需数据放入数组var dataArray=[[result.AAA.one,result.AAA.two],[result.BBB.one,result.BBB.two],[result.CCC.one,result.CCC.two],...]
         4、用新数据更新实例的图表*/
        angular.forEach(myArray,function(item,index){
            var option = item.getOption();
            /*以下直接给配置项赋值*/
            option.series[0].data[0].value = dataArray[index][0];
            /*以下经计算后给配置项赋值*/
            var value = dataArray[index][0];
            var lastValue= (100 - value) * 266 / 360;
            option.series[2].data[0].value = lastValue;
            option.series[2].data[1].value = 100 - lastValue;
            /*以下给配置项添加外来图片*/
            option.graphic = [{}];
            /*以下更新实例的图表*/
            item.setOption(option);
        });
    }
    ```
    三、定时更新数据的多图表实现思路(在angular1框架中使用)方法二:
    1、初始化,
    (1)通过多次执行var oneChart = echarts.init(document.getElementById(id)),获取多个实例并把实例放进数组myArray里;
    (2)多次定义配置项var oneOption = {};
    (3)用angular.forEach(myArray,function(item){ getData () })获取多图表;
    2、定时执行获取数据函数 $scope.myInterval=$interval(function () { getData() }, 3000);
    3、定义获取数据函数getData
    ```javascript
    $scope.getData=function(){
          /*1、发送请求
            2、获取返回值result
            3、择出所需数据放入数组var dataArray=[[result.AAA.one,result.AAA.two],[result.BBB.one,result.BBB.two],[result.CCC.one,result.CCC.two],...]
            4、用新数据更新实例的图表*/
           angular.forEach(myArray,function(item,index){
               /*以下直接给配置项赋值*/
               oneOption.series[0].data[0].value = dataArray[index][0];
               /*以下经计算后给配置项赋值*/
               var value = dataArray[index][0];
               var lastValue= (100 - value) * 266 / 360;
               oneOption.series[2].data[0].value = lastValue;
               oneOption.series[2].data[1].value = 100 - lastValue;
               /*以下给配置项添加外来图片*/
               oneOption.graphic = [{}];
               /*以下更新实例的图表*/
               item.setOption(oneOption);
           });
    }
    ```
    四、定时更新数据的多图表实现思路(在angular1框架中使用)方法三:
    1、初始化,
    (1)一次执行实例获取函数getChartInstances,获取多个实例并把实例放进数组myArray里;
    (2)多次执行配置获取函数getSingleOption,获取多个配置项,比如oneOption;
    (3)用angular.forEach(myArray,function(item){ getData () })获取多图表;
    2、定时执行获取数据函数 $scope.myInterval=$interval(function () { getData() }, 3000);
    3、定义实例获取函数getChartInstances
    ```javascript
    $scope.getChartInstances=function (arrayID){
        var chartsInstance=[];
        for(var i=0;i<arrayID.length;i++){
            var oneChart= echarts.init(document.getElementById(arrayID));
            chartsInstance.push(oneChart);
        }
        return chartsInstance;
    }
    ```
    4、定义配置获取函数getSingleOption
    ```javascript
    $scope.getSingleOption=function (singleID){
        var option = {};
        if(singleID="a"){
            option.series[2].data[0].name = "CPU利用率";
        }
        return option;
    };
    ```   
    5、定义获取数据函数getData
    ```javascript
    $scope.getData=function(){
         /*1、发送请求
           2、获取返回值result
           3、择出所需数据放入数组var dataArray=[[result.AAA.one,result.AAA.two],[result.BBB.one,result.BBB.two],[result.CCC.one,result.CCC.two],...]
           4、用新数据更新实例的图表*/
          angular.forEach(myArray,function(item,index){
              /*以下直接给配置项赋值*/
              oneOption.series[0].data[0].value = dataArray[index][0];
              /*以下经计算后给配置项赋值*/
              var value = dataArray[index][0];
              var lastValue= (100 - value) * 266 / 360;
              oneOption.series[2].data[0].value = lastValue;
              oneOption.series[2].data[1].value = 100 - lastValue;
              /*以下给配置项添加外来图片*/
              oneOption.graphic = [{}];
              /*更新实例的图表*/
              item.setOption(oneOption);
          });
    }
    ```
    ![图片描述](attimg://article/content/picture/201811/09/151111ni2oqqh9myp212pm.png)
    五、setOption的参数
    myChart.setOption(option, notMerge, lazyUpdate);
    1、option:图表的配置项和数据。
    2、notMerge:不跟之前的option合并,默认为false,即合并。
    3、lazyUpdate:不立即更新图表,默认为false,即立即更新。
    3、silent:阻止抛出事件,默认为false,即抛出事件。
    六、在myChart.setOption(option, notMerge, lazyUpdate)中,option的主要构成:
    1、title:标题
    2、legend:图例。它的下一级data与series的下某级name相关联
    3、grid:网格
    4、xAxis:x轴
    5、yAxis:y轴
    6、dataZoom:区域缩放
    7、tooltip:提示框
    8、toolbox:工具栏
    9、timeline:在多个option 间进行切换
    10、graphic:原生图形
    11、series:系列列表。series是数组,下一级是对象,(1)在bar和line中,对象里面的name与legend里面的data数组的某1项一样,对象里面的data数组有多个值,只用一种颜色,legend表现简单(2)在pie中,对象里面的data数组里的name与legend里面的data数组的某1项一样,对象里面的data数组有多个值,每个值用一种颜色,legend表现复杂。
    12、color:调色盘颜色列表
    13、textStyle:全局的字体样式
    14、animation:是否开启动画

     

    哎...今天够累的,签到来了1...
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|手机版|小黑屋|Java自学者论坛 ( 声明:本站文章及资料整理自互联网,用于Java自学者交流学习使用,对资料版权不负任何法律责任,若有侵权请及时联系客服屏蔽删除 )

    GMT+8, 2024-11-15 02:35 , Processed in 1.086776 second(s), 29 queries .

    Powered by Discuz! X3.4

    Copyright © 2001-2021, Tencent Cloud.

    快速回复 返回顶部 返回列表