Ecahrts 3.19 饼图 ajax+ashx+json

自己是真low 现在把东西做出来了之后 觉得自己走了太多弯路 还是不会自己学习 没有自学能力,这一次还是收获很多的 毕竟是自己一个人啃下来的 中途也有问同事、朋友 但是都没有做过这个 ,谢谢他们给的提醒 。有时候他们的建议 让我知晓了写学习的方法吧 从源头下手,一切就会来的简单多了 。

依旧是老样子 看Ecahrts官网 如需下载Echarts 文件 =》 文件下载

接下来就会饼图的代码了 :

文件的引用:

    <script src="../Scripts/jquery-1.8.2.min.js"></script>
    <script src="../Scripts/echarts/echarts.min.js"></script>

HTML代码:

 <div><input type="button" id="btngo" value="Pie" /> </div>
    <div id="contanis" style="width:800px;height:800px"></div>

设置图片的 option

 $("#btngo").click(function () { //这里用的是点击事件下面 当然这也是模仿你有条件查询的时候咯
             var dom = document.getElementById('contanis');
            var mycharts = echarts.init(dom);
            option = {
                title: {
                    text: '部门人口比例',
                    subtext: '测试数据',
                    x: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: []
                },
                series: [
                    {
                        name: '2012年度',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        data: [],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            mycharts.setOption(option);

ajax 里面书写的代码

$.ajax({
                type: "get",
                async: true,            //异步请求(同步请求将会锁住浏览器,用户其他操作必须等待请求完成才可以执行)
                url: "../Handler/DepartmentHandler.ashx",    
                data: {},//demo 没加条件
                dataType: "json",        //返回数据形式为json
                success: function (result) {
                    var name = [];
                    var values = [];                   
                    for (var i = 0; i < result.length; i++)
                    {
                        name.push(result[i].name);                        
                    }                   
                    mycharts.setOption({ //加载数据图表
                        legend:{data:name },
                        series: [{
                            data:result
                        }]
                    });

                },
                    error: function (errorMsg) {
                        //请求失败时执行该函数
                        alert("图表请求数据失败!");
                        //myChart.hideLoading();
                    }

            });   

在ashx 里面

             DataTable result = BLL.Department.GetDeptNumber();          
            List<object> list = new List<object>();
            foreach (DataRow dr in result.Rows)
            {
            // 附上Echarts 所需的格式:[{value:335, name:'直接访问'}]

                Deart d = new Deart();
                d.value = Convert.ToInt32(dr["number"]);
                 //自己粗心 用values Echarts 不认 一直就是undefined 
                d.name = dr["D_Name"].ToString();                
                list.Add(d);
            }
            JavaScriptSerializer jss = new JavaScriptSerializer();
            string json = jss.Serialize(list);

public class Deart   //其实可以不用这么定义  自己保险让它出来的 value 值为int
        {
            public int value { get; set; }
            public string name { get; set; }           

        }

运行结果

demo已经附上 如果很看到代码 你会觉得这小伙子 确实菜
资源里面有 请查阅

### 如何在 Vue3 中使用 ECharts 实现 3D #### 安装依赖库 为了能够在 Vue3 项目中集成并展示 ECharts3D ,需先安装 `echarts` 和 `echarts-gl` 库。通过修改项目的 `package.json` 文件来指定版本号,并执行命令完成安装[^2]。 ```json { "dependencies": { "echarts": "^5.1.2", "echarts-gl": "^1.1.0" } } ``` 接着运行如下命令以保存这些包作为生产环境下的依赖: ```bash npm install echarts-gl@1.1.0 --save ``` #### 创建组件结构 创建一个新的 Vue 组件用于承载图表实例,在此案例中命名为 `EchartsPie3d.vue`。该组件负责初始化 ECharts 并配置所需的数据源与样式设置。 #### 编写 DOM 结构 定义好 HTML 模板部分,其中包含了一个 div 元素用来放置最终渲染出来的形界面[^1]。 ```html <template> <div id="main" style="width: 600px;height:400px;"></div> </template> <script setup lang="ts"> import * as echarts from &#39;echarts&#39;; import &#39;echarts-gl&#39;; // 初始化 echart 实例 const initChart = () => { const chartDom = document.getElementById(&#39;main&#39;); let myChart = echarts.init(chartDom); var option; // 设置选项 option = { title: { text: &#39;3D Pie Chart&#39;, subtext: &#39;&#39;, left: &#39;center&#39; }, tooltip: { trigger: &#39;item&#39; }, legend: { orient: &#39;vertical&#39;, left: &#39;left&#39; }, series: [ { name: &#39;Access From&#39;, type: &#39;pie&#39;, radius: [&#39;40%&#39;, &#39;70%&#39;], avoidLabelOverlap: false, itemStyle: { borderRadius: 10, borderColor: &#39;#fff&#39;, borderWidth: 2 }, label: { show: true, position: &#39;outside&#39; }, emphasis: { label: { show: true, fontSize: &#39;20&#39;, fontWeight: &#39;bold&#39; } }, data: [ { value: 1048, name: &#39;Search Engine&#39; }, { value: 735, name: &#39;Direct&#39; }, { value: 580, name: &#39;Email&#39; }, { value: 484, name: &#39;Union Ads&#39; }, { value: 300, name: &#39;Video Ads&#39; } ] } ], grid3D: {} }; option && myChart.setOption(option); }; onMounted(() => { initChart(); }); </script> ``` 上述代码展示了如何利用 TypeScript 来编写一个简单的 Vue3 单文件组件,它会加载 ECharts 及其扩展插件 `echarts-gl`,并通过调用 `init()` 方法创建图表对象;随后设置了基本的布局参数以及数据集,最后应用到页面上显示出来。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值