ECHARTS饼状图和折线图

最新推荐文章于 2024-07-05 15:59:12 发布

原创

最新推荐文章于 2024-07-05 15:59:12 发布 · 2.1k 阅读

2 ·

CC 4.0 BY-SA版权

本文展示了如何使用ECharts库创建饼状图进行成绩分析，以及生成展示分数段人数的折线图。饼状图直观地表示各分数段占比，折线图则按分数段展示人数变化。代码示例中详细定义了图表的配置项，包括标题、图例、坐标轴等。欢迎提出意见和建议以改进。

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



开发工具与关键技术： Visual Studio 2015    mvc 

作者：彭水清



撰写时间：2019/6/1



在绘图前我们需要为
ECharts 准备一个具备高宽的
dom 容器。

<div class="tab-content" id="nav-tabContent">

@*饼状图*@

<div class="tab-pane fade show active" id="nav-pie" style="width:100%;height:300px;">

<div id="chartTwo" style="width:49%;height:300px;float:right;"></div>

</div>

@*折线图*@

<div class="tab-pane fade" id="nav-line" style="width:99%;height:300px;"></div>

</div>

首先呢，我们需要用到一个插件 echarts.min.js 。

<script src="~/Plugins/echarts/echarts.min.js"></script>

然后就可以通过echarts.init方法初始化一个 echarts 实例并通过setOption方法生成简单的饼状图和折线图。

（饼状）var PieChartTwo =
echarts.init(document.getElementById("chartTwo"));

（折线）var navLine =
echarts.init(document.getElementById("nav-line"));

一、下面是饼状图的代码:

var optionPieChartTwo = {   
//提示框组件

     tooltip: {

       formatter: "{a}
{b} <br/>人数:{c},比例:{d}%"

      //{a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）

         },

       //图例组件