Echarts饼状图和折线图_echartsserieslabelformatter不支持html资源-CSDN文库

共20个文件

js：18个

ds_store：1个

html：1个

5星 · 超过95%的资源需积分: 33 171 浏览量 2015-06-18 17:27:25 上传评论收藏 916KB ZIP 举报

ECharts是一款基于JavaScript的数据可视化库，它提供了丰富的图表类型，如饼图、折线图等，用于直观地展示数据。在ECharts中，饼状图和折线图是两种常用的图表，它们各自有独特的特点和应用场景。饼状图通常用于表示部分与整体之间的比例关系，每个扇形代表一个类别，其面积大小对应于该类别的占比。在ECharts中，饼图可以通过设置`label`属性来控制标签的位置和样式。若希望饼图的标签文本显示在图的下方，可以调整`label`的`position`属性为`bottom`，并根据需要设置其他相关参数，如字体大小、颜色等，以达到理想效果。折线图则适合展现数据随时间的变化趋势，各点间的连线描绘出数据的波动情况。在ECharts中，折线图的坐标轴可以通过配置`xAxis`和`yAxis`进行定制。若要实现坐标轴标签左对齐无间隙，可以设置`xAxis`的`axisLabel`属性，使其`margin`为0，确保标签紧贴轴线。同时，可调整`grid`的`left`值，来控制网格区与左边界的距离，以优化布局。针对手机等移动设备上的显示问题，ECharts提供了响应式设计。通过设置`resizeable`为`true`，ECharts会自动适应容器尺寸变化。若空间有限，可以考虑调整图表的大小和比例，或者利用`grid`和`tooltip`的`trigger`属性，优化提示框的显示方式。例如，将提示框触发方式设为`item`，只在鼠标悬停在具体数据点时显示，避免占用过多空间。在`echarts_demo`这个压缩包中，可能包含了实现上述效果的示例代码和数据。通常，这些示例会包含HTML、CSS和JavaScript文件，展示了如何初始化ECharts实例，以及如何配置各种图表选项。你可以通过分析和运行这些示例，理解并学习如何在实际项目中应用ECharts，创建符合需求的饼状图和折线图。此外，ECharts还支持丰富的交互功能，如数据区域缩放、刷选、数据视图、图例开关等，这为用户提供了更深入的数据探索体验。通过灵活运用这些特性，开发者可以创建出更加生动、具有洞察力的数据可视化应用。 ECharts是一个强大的工具，通过细致的配置和巧妙的布局，可以有效地解决在手机等小屏幕设备上展示图表的问题，同时保持数据的清晰性和易读性。对于开发者来说，熟练掌握ECharts不仅可以提升项目的表现力，也有助于提高工作效率。

资源推荐

资源详情

资源评论

收起资源包目录

echarts_demo.zip （20个子文件）

echarts_demo

demo.html 6KB

.DS_Store 6KB

echarts-all.js 2.03MB

echarts.js 872KB

chart

line.js 37KB

wordCloud.js 86KB

scatter.js 72KB

k.js 14KB

bar.js 32KB

gauge.js 23KB

eventRiver.js 15KB

treemap.js 24KB

chord.js 50KB

tree.js 25KB

venn.js 26KB

radar.js 37KB

funnel.js 24KB

pie.js 33KB

force.js 63KB

map.js 829KB

<!DOCTYPE html> <head> <meta charset="utf-8"> <title>ECharts</title> <script> function onAndroid(obj){ window.demo.jsClick(obj); } </script> </head> <body>  <div id="pie" style="height:200px"></div> <div id="cpu" style="height:400px"></div> <div id="oneminute" style="height:400px"></div> <input id="test" type="button" value="test" onClick="onAndroid('我来了')"/>  <script src="./js/echarts-all.js"></script> <script type="text/javascript"> // 基于准备好的dom，初始化echarts图表 var pieChart = echarts.init(document.getElementById('pie')); var cpuChart = echarts.init(document.getElementById('cpu')); var oneMinuteChart = echarts.init(document.getElementById('oneminute')); var cpuOption = { title:{ text:"CPU走势图" }, tooltip: { show: true }, toolbox: { show : true, padding: 30, feature : { restore : {show: true}, } }, calculable : true, grid:{ x:30, x2:30 }, xAxis : [ { boundaryGap : false, type : 'category', data : ["9.05","9.05","9.05","9.05","9.05","9.05","9.05","9.05","9.05","9.05"] } ], yAxis : [ { min:1, max:300, type : 'value' } ], series : [ { symbol: 'emptyCircle', smooth:true, name:"CPU走势", type:"line", itemStyle: {normal: {areaStyle: {type: 'default'}}}, data:[5, 20, 40, 10, 10, 20,7,35,1,9] } ] }; var oneMinuteOption = { title:{ text:"一分钟负载走势图" }, tooltip: { show: true }, toolbox: { show : true, padding: 30, feature : { restore : {show: true}, } }, calculable : true, grid:{ x:30, x2:30 }, xAxis : [ { boundaryGap : false, type : 'category', data : ["9.05","9.05","9.05","9.05","9.05","9.05","9.05","9.05","9.05","9.05"] } ], yAxis : [ { type : 'value' } ], series : [ { symbol: 'emptyCircle', smooth:true, name:"一分钟负载走势", type:"line", itemStyle: {normal: {areaStyle: {type: 'default'}}}, data:[5, 20, 40, 10, 10, 20,7,35,1,9] } ] }; var labelTop = { normal : { label:{ position:'inside', formatter: '\n{b}', textStyle: { fontSize: 15, baseline: 'top', color: '#1e90ff' } }, labelLine:{show:false} } }; var labelBottom = { normal : { color: '#ccc', label : { formatter : function (params){ return 100 - params.value }, show : true, position : 'center', textStyle: { fontSize :20 } }, labelLine : { show : false } }, emphasis: { color: 'rgba(0,0,0,0)' } }; var radius = [25, 35]; pieOption = { title : { text: '实时平均值', x: 'left' }, toolbox: { show : true, padding: 30, feature : { restore : {show: true}, } }, series : [ { startAngle: 90 + (46 / 100 * 360) / 2, type : 'pie', center : ['12%', '50%'], radius : radius, x: '0%', // for funnel data : [ {name:'other', value:46, itemStyle : labelBottom}, {name:'CPU', value:54,itemStyle : labelTop} ] }, { startAngle:90 + (56 / 100 * 360) / 2, type : 'pie', center : ['37%', '50%'], radius : radius, x:'20%', // for funnel data : [ {name:'other', value:56, itemStyle : labelBottom}, {name:'内存', value:44,itemStyle : labelTop} ] }, { startAngle:90 + (65 / 100 * 360) / 2, type : 'pie', center : ['62%', '50%'], radius : radius, x:'40%', // for funnel data : [ {name:'other', value:65, itemStyle : labelBottom}, {name:'一分钟负载', value:35,itemStyle : labelTop} ] }, { startAngle:90 + (70 / 100 * 360) / 2, type : 'pie', center : ['87%', '50%'], radius : radius, x:'60%', // for funnel data : [ {name:'other', value:70, itemStyle : labelBottom}, {name:'网络LO', value:30,itemStyle : labelTop} ] }, ] }; cpuChart.setOption(cpuOption); oneMinuteChart.setOption(oneMinuteOption); pieChart.setOption(pieOption); function androidFunction(option){ myChart.setOption(option); } </script> </body>

评论收藏

内容反馈