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