echarts仪表盘(ie8中0显示异常)
来源:互联网 发布:书法集字软件 编辑:程序博客网 时间:2024/05/20 02:29
介绍
经常看到仪表盘,如汽车驾驶舱里的仪表盘,使用Echarts制作的仪表盘可以轻松展示用户的数据,清晰的看出某个指标值所在的范围,仪表盘形式的报表应用在各种统计系统中,本文结合实例讲解仪表盘在销售任务完成率的统计应用。
使用步骤
- 首先引入Echarts,然后在需要放置图表的地方加上div#one,同时给它加上宽度和高度属性。
<script src="echarts.min.js"></script> <div id="one" style="width: 300px;height:300px;"></div>
- 接下来要初始化echarts实例,然后设置选项,最后渲染图像。
<div id="one" style="width:300px;height:300px;"></div> <script type="text/javascript"> window.onload = function () { // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('one')); // 指定图表的配置项和数据 var option = { title: { text: '业务指标', //标题文本内容 }, toolbox: { //可视化的工具箱 show: true, feature: { restore: { //重置 show: true }, saveAsImage: {//保存图片 show: true } } }, tooltip: { //弹窗组件 formatter: "{a} <br/>{b} : {c}%" }, series: [{ name: '业务指标', type: 'gauge', min:0, max:60, splitNumber:4, axisLine: { // 坐标轴线 lineStyle: { // 属性lineStyle控制线条样式 color: [[0.4, 'lightgreen'],[0.6, 'orange'],[1, '#ff4500']],//设置刻度值的颜色 width: 13, shadowColor : '#fff', //默认透明 shadowBlur: 10 } }, axisLabel: { // 坐标轴小标记 textStyle: { // 属性lineStyle控制线条样式 fontWeight: 'bolder', color: '#000', shadowColor : '#fff', //默认透明 shadowBlur: 10 } }, axisTick: { // 坐标轴小标记 length :15, // 属性length控制线长 lineStyle: { // 属性lineStyle控制线条样式 color: 'auto', shadowColor : '#fff', //默认透明 shadowBlur: 10 } }, splitLine: { // 分隔线 length :25, // 属性length控制线长 lineStyle: { // 属性lineStyle(详见lineStyle)控制线条样式 width:3, color: '#000', shadowColor : '#fff', //默认透明 shadowBlur: 10 } }, pointer: { // 指针样式 shadowColor : '#fff', //默认透明 shadowBlur: 5 }, title : {//设置标题的属性 offsetCenter: [0,'30%'], //标题位置 textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE fontWeight: 'bolder', fontSize: 15, fontStyle: 'italic', color: '#000', shadowColor : '#fff', //默认透明 shadowBlur: 10 } }, detail : { backgroundColor: '#fff', borderWidth: 1, borderColor: '#fff', shadowColor : '#fff', //默认透明 width: 50, height:50, offsetCenter: [0, '65%'], // x, y,单位px textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE fontWeight: 'bolder', fontSize: 20, color: '#000' } }, // detail: { formatter: '{value}%' }, data: [{ value: 45, name: '完成率' }] }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); } </script>
ie8问题
ie8中仪表盘中detail的0和中间的0显示会有bug
解决办法:
detail:{ formatter: function (value) { return value.toFixed(2); }}
阅读全文
0 0
- echarts仪表盘(ie8中0显示异常)
- Echarts更改仪表盘显示属性
- Echarts仪表盘
- echarts 宽度显示异常
- OSSIM5.0仪表盘显示
- Echarts关于仪表盘
- ECharts 仪表盘改变颜色
- Echarts CPU监控 (折线仪表盘,图例混搭)
- Echarts CPU监控 (折线仪表盘,图例混搭)
- ECharts画动态仪表盘+柱状图(ajax获取+循环画图)
- Echarts中的gauge仪表盘.(特殊加一句代码)
- echarts仪表盘和模拟进度条
- extjs4 ie6 ie7 ie8 显示异常解决
- echarts在360中以及IE8浏览器不兼容:解决方案
- echarts兼容IE8问题
- echarts 根据实际数据改变仪表盘颜色
- ECharts 仪表盘的轴线宽度修改
- echarts中横坐标值如果全部显示
- Docker安装Nginx环境
- 进程间通信的方式
- 初步认识JVM
- JAVA操作Hbase管理类HbaseManage基本详细操作
- java每日一练
- echarts仪表盘(ie8中0显示异常)
- Codeforces845C
- Android Service的bindService和startService混合使用及其关闭分析
- JAVA学习57_ Java千百问_02基本使用(003)_不使用IDE如何打jar包
- python 经典100例 (61-80)
- jquery validate 的自定义验证开始时间不能大于结束时间
- parallel studio xe 2017 update4 编译器套件学生版下载及密钥的申请
- 【NOI2004】郁闷的出纳员(splay)
- 排序算法-交换排序之快速排序