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