折线图和和柱状图

2021-11-01 12:05:00 阅读：187 来源： 互联网

标签：name series type 柱状图 400 折线图 data

折线图和柱状图

折线图

基础折线图配置

代码如下

var chartDoc = document.getElementById("line");//获取显示此图表的标签元素
var myChart = echarts.init(chartDoc);//初始化图标配置
//折线图参数如下：
option = {
  tooltip: {
    trigger: 'axis'
  },
  //标题：
  title: {
    text: '这是主标题',
    textStyle: {
      //这里填主标题的样式
      fontSize: 18,
      fontStyle: 'oblique', //字体样式，斜体
      color: 'red',
      fontWeight:"bolder"//加粗
    },
    subtext: '这是副标题',
    subtextStyle: {
      //这里编辑副标题的样式
    },
    left: 'center', //居中，'left','right'
    top: 'top' //放图上面，放底部为bottom
  },
  xAxis: {
    name: '星期',
    type: 'category', //类目轴直接跟轴数据
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] //x轴数据，数组类型
  },
  yAxis: [{
    name: 'y轴的名字',
    type: 'value' //值类型的轴数据放在series中
  },],
  series: [
    {
      data: [100, 1100, 300, 400, 500, 800, 200], //value轴的数据
      type: 'line', //线的类型
      itemStyle: {
        normal: {
          label: {
            //数据标签
            show: true //是否显示数据
          }
        }
      }
    }
  ]
};
option && myChart.setOption(option)

效果图

1y轴多线折线图

如下方式加入代码：

series:[
   {....},
   {
      data: [400, 1600, 700, 500, 400, 300, 800], //value轴的数据
      type: 'line', //线的类型
      itemStyle: {
        normal: {
          label: {
            //数据标签
            show: true //是否显示数据
          }
        }
      }
    }
]

效果图：

多轴（2y轴）

如下加入代码

yAxis: [
    {......},
     {
      name: '第2个轴',
      type: 'value' 
    },
  ],
//再添加一条线
series:[
   {....},
   {....},
   {
      data: [40,33,34,45,36,44,35], //value轴的数据
      type: 'line', //线的类型
      yAxisIndex:1,//选择用第几个轴，从0开始
      itemStyle: {
        normal: {
          label: {
            //数据标签
            show: true, //是否显示数据
            formatter:"{c}℃"
          }
        }
      }
    }
]

效果图

如果需要调整轴名称的位置的话，可以看https://www.cnblogs.com/xyongz/p/15490718.html

柱状图

基础柱状图配置如下

    var chartDoc = document.getElementById("bar");
    var myChart = echarts.init(chartDoc);
    option = {
        title: {
            text: '这是主标题',
            left: 'center',
            textStyle: {
                fontSize: 18,
                color: 'red',
                fontStyle: 'oblique'//斜体
            },
            subtext: '这是副标题',
            subtextStyle: {
                //设置与textStyle一致
            }
        },
        xAxis: {
            //x轴的属性
            name: '星期',
            type: 'category',
            data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
        },
        yAxis: {
            //x轴的属性
            name: '价格',
            type: 'value',
        },
        series: [{
            type: 'bar',
            data: [100, 400, 500, 700, 300, 500, 100],
            itemStyle: {
                normal: {
                    label: {
                        position: ['50%', '10%'],
                        color: 'white',
                        show: true,

                    },

                }
            }
        },]
    };
    option && myChart.setOption(option);

效果图

多柱

代码如下：

 title:{.....},
 legend: {//添加图例
    left: '20%',
    data: ['北京', '上海']
  },
  xAxis:{....},
  yAxis:{...},
  series:[
      {
      name:"北京",
      ....  
},
      {
      name: '上海',//注意，这个名字一定要和图例中的名字一致，否则检测不到
      type: 'bar',
      data: [200, 300, 400, 200, 400, 500, 400],
      itemStyle: {
        normal: {
          label: {
            position: ['50%', '10%'],
            color: 'white',
            show: true
          }
        }
      }
    },
]

效果图

标签：name,series,type,柱状图,400,折线图,data
来源： https://www.cnblogs.com/xyongz/p/15492837.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9