echart例子

一、效果图

二、步骤

1、添加表单和描述内容组件

2、添加页面初始化前端函数

  • 代码部分

      function (event) {
          var viewModel = this;
          //动态加载js文件函数
          function addScript(jsfile,callback){
            //动态加载js文件
            var secScript = document.createElement("script");
            secScript.setAttribute("src", jsfile);
            document.body.insertBefore(secScript, document.body.lastChild);
            //判断动态js文件加载完成
            secScript.onload = secScript.onreadystatechange = function() {
                if (!this.readyState || this.readyState === "loaded" || this.readyState === "complete" ) {
                    secScript.onload = secScript.onreadystatechange = null;
                    if(callback && typeof(callback)== 'function'){
                          callback(echarts);
                    }
                }
            };
          }
    
          addScript('https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.common.min.js',function(echarts){
                let echersDom=document.getElementById('66bf181b|item23pk');
    
                echersDom.innerHTML='';
                echersDom.style.height='600px';
    
                //初始化echarts实例
                var myChart = echarts.init(echersDom);
                //图表需要展示的数据和配置,此处我用的假数据,具体配置查看echarts官网
                var option;
    
                option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b}: {c} ({d}%)'
                    },
                    legend: {
                        data: ['直达', '营销广告', '搜索引擎', '邮件营销', '联盟广告', '视频广告', '百度', '谷歌', '必应', '其他']
                    },
                    series: [
                        {
                            name: '访问来源',
                            type: 'pie',
                            selectedMode: 'single',
                            radius: [0, '30%'],
                            label: {
                                position: 'inner',
                                fontSize: 14,
                            },
                            labelLine: {
                                show: false
                            },
                            data: [
                                {value: 1548, name: '搜索引擎'},
                                {value: 775, name: '直达'},
                                {value: 679, name: '营销广告', selected: true}
                            ]
                        },
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius: ['45%', '60%'],
                            labelLine: {
                                length: 30,
                            },
                            label: {
                                formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}:}{c}  {per|{d}%}  ',
                                backgroundColor: '#F6F8FC',
                                borderColor: '#8C8D8E',
                                borderWidth: 1,
                                borderRadius: 4,
    
                                rich: {
                                    a: {
                                        color: '#6E7079',
                                        lineHeight: 22,
                                        align: 'center'
                                    },
                                    hr: {
                                        borderColor: '#8C8D8E',
                                        width: '100%',
                                        borderWidth: 1,
                                        height: 0
                                    },
                                    b: {
                                        color: '#4C5058',
                                        fontSize: 14,
                                        fontWeight: 'bold',
                                        lineHeight: 33
                                    },
                                    per: {
                                        color: '#fff',
                                        backgroundColor: '#4C5058',
                                        padding: [3, 4],
                                        borderRadius: 4
                                    }
                                }
                            },
                            data: [
                                {value: 1048, name: '百度'},
                                {value: 335, name: '直达'},
                                {value: 310, name: '邮件营销'},
                                {value: 251, name: '谷歌'},
                                {value: 234, name: '联盟广告'},
                                {value: 147, name: '必应'},
                                {value: 135, name: '视频广告'},
                                {value: 102, name: '其他'}
                            ]
                        }
                    ]
                };
              option && myChart.setOption(option);
          })
        }
    

    3、引入js

    有两种方式,一种是通过cdn方式引入(见代码),一种是通过外部文件上传,引入方式相应修改

  • 第一种

  • 第二种

更多echart示例请参考:https://echarts.apache.org/examples/zh/index.html

Copyright © 用友 -【生态技术部】 2021 all right reserved,powered by Gitbook修订时间: 2021-12-07 19:02:02

results matching ""

    No results matching ""