其他分享
首页 > 其他分享> > echarts 柱状图

echarts 柱状图

作者:互联网

在这里插入图片描述

option = {
  color: ['#39FDF9', '#FBCE39'],
   legend: {//图例文字颜色
     textStyle: {
       color: "#60A8FF"
     },
     //模板
     // formatter: '123{name}'
   },
   tooltip: {
     //提示框
     trigger: 'axis',
     axisPointer: {
       type: 'shadow',
     },
     //提示框模板
     formatter: '<strong> {b0}</strong> <br /> <span style="display: inline-block; margin-right: 4px; border-radius: 10px; width: 10px; height: 10px;background-color: #39FDF9;"></span> 计划完成:<strong>{c0}</strong>万元 <br /> <span style="display: inline-block; margin-right: 4px; border-radius: 10px; width: 10px; height: 10px;background-color: #FBCE39;"></span> 实际完成:<strong>{c1}</strong>万元'
   },
   grid: {
     // 直角坐标系内绘图网格
     show: false,
     backgroundColor: "rgba(9, 146, 71, 0)",// 背景网格颜色
     left: "8%",//绘制直角坐标系位置
     top: "15%",
     right: "4%",
     bottom: "10%",
   },
   xAxis: {
     type: 'category',
     data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
     axisLine: {
       lineStyle: {
         color: "#004DA1"
       }
     }
   },
   yAxis: {
     name: '单位:万元',
     type: 'value',
     splitLine: {
       show: true,
       lineStyle: {
         color: "#004DA1",//y轴颜色
         type: "dashed"//y轴虚线。可选'solid' 'dashed' 'dotted'
       }
     },
     axisLine: {
       show: true,
       lineStyle: {
         type: "solid", //纵坐标轴 轴线
         color: "#004DA1",
       }
     }
   },
   series: [
     {
       name: "计划完成:76587万元",
       type: "bar",
       data: [120, 200, 150, 150, 80, 70, 150, 110, 150, 150, 300],
     },
     {
       name: "实际完成:76587万元",
       type: "bar",
       data: [120, 150, 200, 150, 150, 80, 150, 70, 110, 130, 150],
     }
   ]
};

标签:150,name,show,color,lineStyle,柱状图,type,echarts
来源: https://blog.csdn.net/qq_43780814/article/details/120765234