echarts的小例子

来源：互联网发布：软件测试技术大全编辑：程序博客网时间：2024/05/29 13:22

（1）echarts的使用

根据自己对图表类型的需要，去echarts官网找对应的图表并复制代码到本地

了解echarts里传数值的数组以及 series不同参数的配置

（2）JavaScript

js为弱类型语言，有时变量类型需要强制转换来用

onclick函数的使用，点击触发一个函数，每点一次执行一次该函数

上午纠结了半天是不是因为数组类型不正确才显示不出来，还有是不是因为数组变量只能在该函数内使用，

考虑到全局变量的问题，函数内定义的变量只能在函数内访问，除非定义全局变量

原来是onclick函数没有用对

onclick: 点击一次会执行一次function函数

    <!DOCTYPE html>      <html>      <head>      <meta charset="UTF-8">      <title>echarts测试</title>      </head>      <body>         <h4>请输入坐标值</h4>       <div style="margin-left:10px;height=200px;width:200px;border: 0px dotted black">        <p>x0:<input  type="text" name="x0" id="x0" size="20" maxlength="40" value=""></p>        <p>y0:<input  type="text" name="y0" id="y0" size="20" maxlength="40" value=""></p>        <p>x1:<input  type="text" name="x1" id="x1" size="20" maxlength="40" value=""></p>        <p>y1:<input  type="text" name="y1" id="y1" size="20" maxlength="40" value=""></p>        <button onclick="clickHandler()">确定</button><!--点击button按钮，触发clickHandler()函数，点击一次，执行一次 -->       </div>                       <!-- 第一步：标签式单文件引入。引入之后可以直接使用echarts对象。 -->          <script src="echarts.js"></script>          <!-- 第二步：为ECharts准备一个具备大小（宽高）的Dom -->          <div id="main"              style="height: 600px; width: 600px; border: 0px dotted black"></div>          <!-- 注意顺序，使用echarts对象要在引入echarts文件之后 -->          <script type="text/javascript">              // 初始化一个图表实例          var myChart = echarts.init(document.getElementById('main'));    // dataAll[0][1]=[0.0, 0.0];    function clickHandler()    {        var x0=document.getElementById("x0").value;        var y0=document.getElementById("y0").value;        var x1=document.getElementById("x1").value;        var y1=document.getElementById("y1").value;         //--------------------------------------------DDA算法-------------------         var a = new Array(20); //指创建长度为50的数组          var x,dx,dy,y,k;         dx=Number(x1)-Number(x0),dy=Number(y1)-Number(y0);         k=dy/dx,y=Number(y0);         for(x=Number(x0);x<=Number(x1);x++)         {              a[x]=[x,Math.round(y)];                          y=Number(y)+Number(k); //JS弱类型，需将变量转化为数字类型才能做加法运算             // alert(a[x]);         }         console.log(a instanceof Array) //返回true 判断是否为数组          //alert(window.a);         //--------------------------------------------DDA算法-------------------           var markLineOpt = {            animation: false,            label: {                normal: {                    formatter: 'y = 0.5 * x + 3',                    textStyle: {                        align: 'right'                    }                }            },            lineStyle: {                normal: {                    type: 'solid'                }            },            tooltip: {                formatter: 'y = 0.5 * x + 3'            },            data: [[{                coord: [0, 3],                symbol: 'none'            }, {                coord: [20, 13],                symbol: 'none'            }]]        };        option = {            title: {                text: 'Anscombe\'s quartet',                x: 'center',                y: 0            },            grid: [                {x: '7%', y: '7%', width: '38%', height: '38%'},                {x2: '7%', y: '7%', width: '38%', height: '38%'},                {x: '7%', y2: '7%', width: '38%', height: '38%'},                {x2: '7%', y2: '7%', width: '38%', height: '38%'}            ],            tooltip: {                formatter: 'Group {a}: ({c})'            },            xAxis: [                {gridIndex: 0, min: 0, max: 6}                           ],            yAxis: [                {gridIndex: 0, min: 0, max: 6}                            ],            series: [                {                    name: 'I',                    type: 'scatter',                    xAxisIndex: 0,                    yAxisIndex: 0,                    data: a,                    markLine: markLineOpt                }                            ]        };          myChart.setOption(option); }  //function函数结束             </script>      </body>      </html>

0 0