echarts x轴名称_echarts之折线图配置

最新推荐文章于 2024-02-21 09:41:11 发布

VIP文章 weixin_39664774

最新推荐文章于 2024-02-21 09:41:11 发布

阅读量2.8k

点赞数 2

文章标签： echarts x轴名称

本文链接：https://blog.csdn.net/weixin_39664774/article/details/112155143

版权

一 . 问题汇总：折线图问题与解决

折线图中的多条折线，怎么设置？
怎么设置echarts的背景颜色？
怎么设置X轴，Y轴的坐标线的颜色？
怎么将X轴的数据倾斜显示？
怎么让你的折线有弧度？

初始样式如图，以及要解决的问题：

二. 前提准备条件

要使用echarts，首先要在你的页面中引入echarts.js；
要在.html文件中，设置一个容器，并给它设置宽高属性；
- 再次声明，必须给容器设置宽高，它是用来给画布提供一个空间，否则是不会显示的；
最后就是关于echarts的配置；
- 可以单独写一个js文件，然后引进来；
- 也可以直接在index.html中写一个<script> // 相关代码 </script>

index.html文件代码如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title></title>
        <!--第一步： 引入 ECharts 文件 -->
        <script src="js/node_modules/echarts/dist/echarts.min.js"></script>
    </head>
    <body>
          <!--第二步：指定一个容器用来存放echarts，也就是一个设置宽高属性的 DOM节点 -->
    <div id="box" style="width: 600px;height:400px;"></div>
    </body>
</html>

我这里图方便，js就直接写在html文件里了

<script>
// 获取到这个DOM节点，然后初始化

    var myChart = echarts.init(document.getElementById("box"));

// option 里面的内容基本涵盖你要画的图表的所有内容
    var option = {
        // 定义样式和数据
    }
    
// 一定不要忘了这个，具体是干啥的我忘了，官网是这样写的使用刚指定的配置项和数据显示图表。  
    myChart.setOption(option);
</script>

注意：
你在写myChart.setOption(option);这行代码的时候一定不要忘了这个myChart是要和你上面定义的var 变量名对应起来，比如var myChart = echarts.init(document.getElementById("box"));举个栗子吧：
如果你定义的变量名是oMyChart,那你就这样写：

var oMyChart = echarts.init(document.getElementById("box"));
var option = {
    
            // 定义样式和数据
            }
oMyChart.setOption(option);

关键内容都在option中:

var option = {
    
                        backgroundColor: '#FBFBFB',
                        tooltip : {
    
                            trigger: 'axis'
                        },
                        legend: {
    
                            data:['充值','消费']
                        },

                        calculable : true,


                        xAxis : [
                            {
    
                                axisLabel:{
    
                                    rotate: 30,
                                    interval:0
                                },
                                axisLine:{
    
                                  lineStyle :{
    
                                      color: '#CECECE'
                                  }
                                },
                                type : 'category',
                                boundaryGap : false,
                                data : function (){
    
                                    var list = [];
                                    for (var i = 10; i <= 18; i++) {
    
                                        if(i<= 12){

最低0.47元/天解锁文章

weixin_39664774

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
echarts x轴名称_echarts之折线图配置

一 . 问题汇总：折线图问题与解决折线图中的多条折线，怎么设置？怎么设置echarts的背景颜色？怎么设置X轴，Y轴的坐标线的颜色？怎么将X轴的数据倾斜显示？怎么让你的折线有弧度？初始样式如图，以及要解决的问题：二. 前提准备条件要使用echarts，首先要在你的页面中引入echarts.js；要在.html文件中，设置一个容器，并给它设置宽高属性；再次声明，必须给容器设置宽高，它是用来给画...
复制链接

扫一扫