ECharts.js 3.0 html应用经验分享

最新推荐文章于 2025-04-06 10:09:06 发布

原创最新推荐文章于 2025-04-06 10:09:06 发布 · 4.7k 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 同时被 2 个专栏收录

4 篇文章

订阅专栏

Html

4 篇文章

订阅专栏

本文探讨了手机APP中HTML页面的环形图分区选中功能开发，对比了两种方案，并选择了ECharts.js 3.0进行实现。文章详细介绍了如何通过ECharts设置环形图、处理点击事件及动态加载不同颜色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

业务需求要用到环形图的分区选中的开发，

情景展示：好比一个环形，你可以等分成1-8分不同的分数，每份表示一种状态，你选中一个，表示你当前的状态值

需求分析：方案1：设计背景，分成8种情况等分，经过开发过程，这种比较，选中展示比较生硬，没有动画效果，相对来说，和后台交互每次点击事件都比较慢

方案2：后来考虑到这篇文章需要介绍的这个插件ECharts.js 3.0，采用画布功能Canvas,支持ajax动态加载，生成不同的份数的画布，而且每个分区都支持

点击动作捕捉，还支持，文字label说明

<span style="color:#ff0000;">//点击事件捕捉 </span>

myChart.on('click', function (params) { //params的功能很强大
        if(params.data.workstateid==selectworkstateid){                            //取消当前选中样式
            unSelectPie(selectstatename);
            return;
        }

        selectstatename = params.name;
        selectworkstateid = params.data.workstateid;
        changeSeetingShow(selectstatename,"","");
        var  type = submitStatusByStateName(selectstatename);
        setTimeout("submitSetStatusDetails("+type+")", delayTimeForSubmit) <span style="color:#ff0000;">;
    });</span>

问题：1.我们是手机app中的html页面开发，所以对插件的大小还是很讲究的，我们支取ECharts.js 3.0的最基础压缩min包，但是还有268kb,这一点很不好，对于不支持4G网络或者网络较差的手机来说体验不是很好(这是个bug),我们希望200kb一下的js，这是个缺憾。

2. 3.0版本的开发文档还是看不清楚，后来发现2.0版本的文档是可以参考的，而且大量注释，这一点非常好。

3. 初始化，我们要默认选中，非选中等各种事件，动画，这时候必须去找文档了，还好echart.js,这一点支持很好。上点干货吧

//第一次进来，每日
function initWorkStateFirstLogin(){
    selectPie(selectstatename);                                                   //此时默认即"在岗"
    setTimeout('submitSetStatusDetails(0)', delayTimeForSubmit) ;
}

//取消选择
function unSelectPie(name){
     myChart.dispatchAction({
              type: 'pieUnSelect',
              name: name
      });
}


//选择，初始化用
function selectPie(name){
    myChart.dispatchAction({
        type: 'pieSelect',
        name: name
    });
}

4.过程中，我们需要给不同的分区渲染上自己可以设定的颜色，这一点文档中时没有说明的，估计是为了推广他们新出的主题插件吧，这里我还是上吧。

<span style="color:#ff6666;">//function 初始化 画布pie  我们初始化是没有加载数据和颜色的</span>
function initPie(){

     myChart = echarts.init(document.getElementById('workstatuList'));              // 基于准备好的dom，初始化echarts实例

     myChart.setOption({                                                            // 使用刚指定的配置项

          series: [{
                    name:'MyWorkStatus',
                    selectedMode: 'single',
                    avoidLabelOverlap: false,
                    type:'pie',
                    radius: ['20%', '80%'],
                    label: {
                            normal: {
                                    rotate:true,
                                    show: true,
                                    position: 'inner'
                            },
                            emphasis: {
                                show: true,
                                textStyle: {
                                    //fontSize: '30',
                                    fontWeight: 'bold'
                                }
                            }
                    },
                     labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data:[],
                    color:[]
                  }]
     });
}

//pie异步加载数据
function setPieList(dsList){
    var dataArray = new Array();
    var colorArray = new Array();
    for(var i=0; i<dsList.getRowCount(); i++){
        dsList.goToRow(i);
        var _statename = dsList.getValue("statename");
        var _workstateid = dsList.getValue("workstateid");
        if(_statename=="在岗"){//初始化的时候保存
            selectworkstateid = _workstateid;
            selectstatename = _statename;
        }
        dataArray.push({"value":1,"name":_statename,"workstateid":_workstateid});
        colorArray.push(dsList.getValue("statuscolour"));
    }
    console.log(colorArray)//主要是放在加载数据后再给这个chart赋值，其实就是series里面的2个属性，他们的赋值其实都是数组类型的
   <span style="color:#ff6666;"> myChart.setOption({
        series: [{
            data: dataArray,
            color:colorArray
        }]
    });</span>
}

类似于这样:

<span style="color:#ffffff;background-color: rgb(255, 153, 255);">  color : ['#a2d4e6','#0098d9','#005eaa','#339ca8'];</span>

<span style="color:#ffffff;background-color: rgb(255, 153, 255);">
</span>

<span style="font-size:18px;color:#330033;background-color: rgb(255, 255, 255);"><strong>就说到这里吧，至于如何装配，如何加载js等，看官网教程和demo中的代码，这样才能学到东西，我写这些，只是想有人万一页开发这个，看到我的分享，可以少走点弯路，而不是不劳而获，主要是自己去看文档，这很重要，才能学到东西，如有不明白，可以给我留言</strong></span>