Echarts-引入两个/多个图标

来源：互联网发布：安卓软件挂编辑：程序博客网时间：2024/06/08 23:30
在这里，演示的是引入两个表盘，那么直接通过代码来看吧...
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title>   <!-- ECharts单文件引入 -->  <script src="js/dist/echarts.js"></script></head><body>     <!-- 为ECharts准备具备大小（宽高）的Dom -->    <div id="temp" style="height:350px;width:500px"></div>    <div id="co" style="height:350px"></div>    </body><script type="text/javascript">// 路径配置require.config({    paths: {        echarts: 'js/dist'    }});     // 使用     require(         [             'echarts',             'echarts/chart/gauge' // 浅色仪表盘         ],         SetEcharts       );          function SetEcharts(ec){     TempGauge(ec);     CoGauge(ec);     }                /*第一个*/         function TempGauge(ec) {     // 基于准备好的dom，初始化echarts图表     var TempChart = ec.init(document.getElementById('temp'));             var option = {    tooltip : {        formatter: "{a} <br/>{b} : {c}℃"    },    toolbox: {        show : true,        feature : {            mark : {show: true},            restore : {show: true},            saveAsImage : {show: true}        }    },    series : [        {            name:'当前温度值',            type:'gauge',            splitNumber: 10,       // 分割段数，默认为5            axisLine: {            // 坐标轴线                lineStyle: {       // 属性lineStyle控制线条样式                    color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']],                     width: 8                }            },            axisTick: {            // 坐标轴小标记                splitNumber: 10,   // 每份split细分多少段                length :12,        // 属性length控制线长                lineStyle: {       // 属性lineStyle控制线条样式                    color: 'auto'                }            },            axisLabel: {           // 坐标轴文本标签，详见axis.axisLabel                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE                    color: 'auto'                }            },            splitLine: {           // 分隔线                show: true,        // 默认显示，属性show控制显示与否                length :30,         // 属性length控制线长                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式                    color: 'auto'                }            },            pointer : {                width : 5            },            title : {                show : true,                offsetCenter: [0, '-40%'],       // x, y，单位px                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE                    fontWeight: 'bolder'                }            },            detail : {                formatter:'{value}℃',                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE                    color: 'auto',                    fontWeight: 'bolder'                }            },            data:[{value: 50, name: '温度(℃)'}]        }    ]};           TempChart.setOption(option); }        /*第二个*/    function CoGauge(ec) {     // 基于准备好的dom，初始化echarts图表     var CoChart = ec.init(document.getElementById('co'));             var option = {    tooltip : {        formatter: "{a} <br/>{b} : {c}ppm"    },    toolbox: {        show : true,        feature : {            mark : {show: true},            restore : {show: true},            saveAsImage : {show: true}        }    },    series : [        {            name:'当前CO浓度值',            type:'gauge',            splitNumber: 10,       // 分割段数，默认为5            axisLine: {            // 坐标轴线                lineStyle: {       // 属性lineStyle控制线条样式                    color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']],                     width: 8                }            },            axisTick: {            // 坐标轴小标记                splitNumber: 10,   // 每份split细分多少段                length :12,        // 属性length控制线长                lineStyle: {       // 属性lineStyle控制线条样式                    color: 'auto'                }            },            axisLabel: {           // 坐标轴文本标签，详见axis.axisLabel                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE                    color: 'auto'                }            },            splitLine: {           // 分隔线                show: true,        // 默认显示，属性show控制显示与否                length :30,         // 属性length控制线长                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式                    color: 'auto'                }            },            pointer : {                width : 5            },            title : {                show : true,                offsetCenter: [0, '-40%'],       // x, y，单位px                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE                    fontWeight: 'bolder'                }            },            detail : {                formatter:'{value}ppm',                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE                    color: 'auto',                    fontWeight: 'bolder'                }            },            data:[{value: 50, name: 'CO(ppm)'}]        }     ]};           CoChart.setOption(option); }</script></html>
0 0