echarts实现双Y轴之散点和折线图

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_38383877/article/details/85078376

代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title></title>
    <script src="echarts.js"></script>
</head>

<body>
    <div id="box" style="width: 600px; height:400px;"></div>
    <script>
    // 获取到这个DOM节点,然后初始化
    var myChart = echarts.init(document.getElementById("box"));
    data_line=[['100', '800'],['1100', '400'],]
    data_scatter=[ ['100', '800'],['200', '300'],['300', '500'],['400', '300'],
                   ['500', '100'],['600', '400'],['700', '500'],['800', '200'],
                   ['900', '800'],['1000', '300'],['1100', '500'],['1200', '300'],
                   ['1300', '100'],['1400', '400'],['1500', '500'],['1600', '200']]
    // option 里面的内容基本涵盖你要画的图表的所有内容
                    var option = {
                        backgroundColor: '#FBFBFB',
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ['充值', '消费']
                        },
                        calculable: true,
                         xAxis:
                         [{
                            axisLabel: {
                                rotate: 30,
                                interval: 0
                            },
                            axisLine: {
                                lineStyle: {
                                    color: '#CECECE'
                                }
                            },
                            type: 'value',
                            boundaryGap: false,
                            splitLine: {
                                show: true,
                                interval: 'auto',
                                lineStyle: {
                                    color: ['#FBFBFB']
                                }
                            },
                            axisTick: {
                                show: false
                            },
                        }],
                        yAxis: [{
                            type: 'value',
                            splitLine: {
                                lineStyle: {
                                    color: ['#D4DFF5']
                                }
                            },
                            axisLine: {
                                lineStyle: {
                                    color: '#CECECE'
                                }
                            }
                        }],
                        axisTick: {
                            show: false
                        },
                        series: [{
                            name: '充值',
                            type: 'line',
                            symbol: 'none',
                            smooth: 0.3,
                            color: ['#66AEDE'],
                            // data:[800, 300, 500, 800, 300, 600,500,600]
                            data: data_line,
                             lineStyle: {
                                 normal: {
                                     width: 5
                                 }
                             }
                        },
                            {
                                name: '消费',
                                type: 'scatter',
                                symbol: 'circle',

                                color: ['#90EC7D'],
                                // data: [600, 300, 400, 200, 300, 300, 200, 400]
                                data: data_scatter,

                            }]
                    };
    // 一定不要忘了这个,具体是干啥的我忘了,官网是这样写的使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    </script>
</body>

</html>

效果图:
                            

参考自:https://www.jianshu.com/p/a17ab6913cb3

展开阅读全文

echarts折线图x轴动态刷新

03-28

[code=javascript]var base = +new Date(2014, 9, 3);rnvar oneDay = 24 * 3600 * 1000;rnvar date = [];rnrnvar data = [Math.random() * 150];rnvar now = new Date(base);rnrnfunction addData(shift) rn now = [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/');rn date.push(now);rn data.push((Math.random() - 0.4) * 10 + data[data.length - 1]);rnrn if (shift) rn date.shift();rn data.shift();rn rnrn now = new Date(+new Date(now) + oneDay);rnrnrnfor (var i = 1; i < 6; i++) rn addData();rnrnrnoption = rn xAxis: rn type: 'category',rn boundaryGap: false,rn data: datern ,rn yAxis: rn boundaryGap: [0, '50%'],rn type: 'value'rn ,rn series: [rn rn name:'成交',rn type:'line',rn smooth:true,rn symbol: 'none',rn stack: 'a',rn areaStyle: rn normal: rn ,rn data: datarn rn ]rn;rnrnsetInterval(function () rn addData(true);rn myChart.setOption(rn xAxis: rn data: datern ,rn series: [rn name:'成交',rn data: datarn ]rn );rn, 1000);[/code]rnrn想让x轴单位格式为:rn 年/月/日rn小时:分钟:秒 rnrn但是我写出来小时分钟秒有问题,带秒的问题如下:rn[code=javascript]改分钟刷新rnrnvar base = +new Date(2014, 9, 3, 5, 12,10);rnvar oneMin = 1000;rnvar date = [];rnrnvar data = [Math.random() * 150];rnvar now = new Date(base);rnrnfunction addData(shift) rn now = [now.getFullYear(), now.getMonth() + 1, now.getDate(), now.getHours(), now.getMinutes(), now.getSeconds()].join('/');rn date.push(now);rn data.push((Math.random() - 0.4) * 10 + data[data.length - 1]);rnrn if (shift) rn date.shift();rn data.shift();rn rnrn now = new Date(+new Date(now) + oneMin);rn rnrnrnfor (var i = 1; i < 6; i++) rn addData();rnrnrnoption = rn xAxis: rn type: 'category',rn boundaryGap: false,rn data: datern ,rn yAxis: rn boundaryGap: [0, '50%'],rn type: 'value'rn ,rn series: [rn rn name:'成交',rn type:'line',rn smooth:true,rn symbol: 'none',rn stack: 'a',rn areaStyle: rn normal: rn ,rn data: datarn rn ]rn;rnrnsetInterval(function () rn addData(true);rn myChart.setOption(rn xAxis: rn data: datern ,rn series: [rn name:'成交',rn data: datarn ]rn );rn, 1000);[/code]rnrn谢谢。 论坛

没有更多推荐了,返回首页