百度echarts使用体会一

朱雀 2022-01-14 11:47 238阅读 0赞

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][]

一、如何获得百度echarts

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

二、如何用

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

首先建一个网页，->引入echarts.all.js，这个我想前端应该都会吧，如果要兼容ie8再引入另外的一个js，那就是excanvass.js,具体的下载地址很多，我就随便下了个，如果实在是找不到，我就给一个吧，[http://pan.baidu.com/s/1hqndhn2][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 : '平均值'}
                    ]
                }
            }
        ]
    };

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

chart.setOption(option );

然后运行页面，看是不是很简答，可能有的人会没有效果，那是因为自己的要绘制的图表框框，的宽度和高度没有进行定义。

是不是很神奇，出来了：

![143301\_YSxb\_261347.png][143301_YSxb_261347.png]

如果你没有看到个效果的话，我建议你还是转行吧，这个行业不适合你。因为这是一个苦逼的行业。

三、如何自定义各种东西

关于自定义这就需要看那个文档了，当然那个文档给东西只是一个参考，很多的东西，想要对自己想要进行自定义的地方进行自定义，还是需要费点时间来进行探索的。如果你要定义出一个你想要的效果，找不到方法可以留言，我定会给一些回复的……

转载于:https://my.oschina.net/shuinian/blog/419607

[2019_Python_]: https://my.oschina.net/u/2663968/blog/3061697
[hot3.png]: /images/20220114/e9f15f2775e84b5f8f53eaab92b1536a.png
[www.baidu.com]: http://www.baidu.com
[http_echarts.baidu.com_doc_doc.html]: http://echarts.baidu.com/doc/doc.html
[http_pan.baidu.com_s_1hqndhn2]: http://pan.baidu.com/s/1hqndhn2
[143301_YSxb_261347.png]: /images/20220114/a33476bc40d540688ebb4fd1d9cec78e.png