百度echarts使用体会一

最新推荐文章于 2024-10-02 05:39:15 发布

weixin_34219944

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量150

点赞数

文章标签： javascript python 前端 ViewUI

原文链接：https://my.oschina.net/shuinian/blog/419607

版权

2019独角兽企业重金招聘Python工程师标准>>>

一、如何获得百度echarts

这个我相信每个人都会，打开浏览器，输入：www.baidu.com 然后搜索，echarts，放心这个一定是在最前面，进入之后单击下载，下载自己想要的版本就行，我这边用的2.x,其实对于各个版本间的官网给有介绍。

二、如何用

这个简单，直接打开这个http://echarts.baidu.com/doc/doc.html 地址就行，就能够找到使用方法。这里也有各个内容的详细解释。我这里做的不是内容详解，做的只是自己的感受。由于我们的项目跟cmd还有amd没有什么关系，我就用最普通的使用方法了，当然这种方法也是最简单的方法。

首先建一个网页，->引入echarts.all.js，这个我想前端应该都会吧，如果要兼容ie8再引入另外的一个js，那就是excanvass.js,具体的下载地址很多，我就随便下了个，如果实在是找不到，我就给一个吧，http://pan.baidu.com/s/1hqndhn2 密码：g3wr，这个应该是能够用的，有事没事可以下着玩，如果是其他的用的话也是可以下载玩玩的。

然后呢建立一个自己的js文件，也可以不建立，为了让js和前台页面进行一个分离，还是建立一个比较好。然后的初始化一块儿画布，这个画布就是索要进行绘制图表的画布，具体大方法如下：

var _dom = document.getElementById('chartid');
var chart = echarts.init(_dom);
chart.clear();

这应该算是比较简单的方法。

然后设置最opt，这个最简单的方法就是从官方给的例子中进行拷贝一个，然后进行放进去，比如说下面的：

var option = {
    title : {
        text: '未来一周气温变化',
        subtext: '纯属虚构'
    },
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data:['最高气温','最低气温']
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {show: true, type: ['line', 'bar']},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    xAxis : [
        {
            type : 'category',
            boundaryGap : false,
            data : ['周一','周二','周三','周四','周五','周六','周日']
        }
    ],
    yAxis : [
        {
            type : 'value',
            axisLabel : {
                formatter: '{value} °C'
            }
        }
    ],
    series : [
        {
            name:'最高气温',
            type:'line',
            data:[11, 11, 15, 13, 12, 13, 10],
            markPoint : {
                data : [
                    {type : 'max', name: '最大值'},
                    {type : 'min', name: '最小值'}
                ]
            },
            markLine : {
                data : [
                    {type : 'average', name: '平均值'}
                ]
            }
        },
        {
            name:'最低气温',
            type:'line',
            data:[1, -2, 2, 5, 3, 2, 0],
            markPoint : {
                data : [
                    {name : '周最低', value : -2, xAxis: 1, yAxis: -1.5}
                ]
            },
            markLine : {
                data : [
                    {type : 'average', name : '平均值'}
                ]
            }
        }
    ]
};

这样属性就有了，然后就是具体的绘制了，看好了，见证奇迹的时候到了，