js图表制作

简介: js图表制作
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <script src="./echarts.min.js"></script>
    <script src=""></script>
  </head>
  <body style="background-color: #F1F1F1;">
    <style>
      .big {
        display: flex;
        justify-content: space-around;
        width: 94%;
        margin-left: 3%;
      }
 
      #main {
        background-color: white;
        width: 25%;
        height: 180px;
      }
 
      #mainTwo {
        background-color: white;
        width: 25%;
        height: 180px;
      }
 
      #mainThree {
        background-color: white;
        width: 25%;
        height: 180px;
      }
 
      #mainFour {
        background-color: white;
        width: 25%;
        height: 180px;
      }
 
      #mainFive {
        background-color: white;
        width: 92%;
        margin-left: 4%;
        height: 360px;
        margin-top: 1%;
      }
    </style>
    <div class="big">
      <div id="main" style="width: 23%;height:220px;"></div>
      <div id="mainTwo" style="width: 23%;height:220px;"></div>
      <div id="mainThree" style="width: 23%;height:220px;"></div>
      <div id="mainFour" style="width: 23%;height:220px;"></div>
    </div>
    <div id="mainFive"></div>
    <script type="text/javascript">
      let data = {
        "code": 1,
        "msg": "请求成功",
        "user_up": 262,
        "user_down": 4,
        "goods_up": 5,
        "goods_down": 4,
        "supply_up": 3,
        "supply_down": 0,
        "need_up": 5,
        "need_down": 0,
        "accounting": 2,
        "lawyer": 2,
        "bond": 2,
        "bar": [{
            "id": 1,
            "name": "农业",
            "goods": 0,
            "supply": 0,
            "need": 1
          },
          {
            "id": 2,
            "name": "林业",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 3,
            "name": "畜牧业",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 4,
            "name": "渔业",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 6,
            "name": "农、林、牧、渔专业及辅助性活动",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 7,
            "name": "煤炭开采和洗选业",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 8,
            "name": "石油和天然气开采业",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 9,
            "name": "黑色金属矿采选业",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 10,
            "name": "有色金属矿采选业",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 11,
            "name": "非金属矿采选业",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 12,
            "name": "开采专业及辅助性活动",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 13,
            "name": "其他采矿业",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 14,
            "name": "农副食品加工业",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 15,
            "name": "食品制造业",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 16,
            "name": "酒、饮料和精制茶制造业",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 17,
            "name": "烟草制品业",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 18,
            "name": "纺织业",
            "goods": 1,
            "supply": 0,
            "need": 0
          },
          {
            "id": 19,
            "name": "纺织服装、服饰业",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 20,
            "name": "皮革、毛皮、羽毛及其制品和制鞋业",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 21,
            "name": "木材加工和木、竹、藤、棕、草制品业",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 22,
            "name": "家具制造业",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 23,
            "name": "造纸和纸制品业",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 24,
            "name": "印刷和记录媒介复制业",
            "goods": 0,
            "supply": 0,
            "need": 1
          },
          {
            "id": 25,
            "name": "文教、工美、体育和娱乐用品制造业",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 26,
            "name": "石油、煤炭及其他燃料加工业",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 27,
            "name": "化学原料和化学制品制造业",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 28,
            "name": "医药制造业",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 29,
            "name": "化学纤维制造业",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 30,
            "name": "橡胶和塑料制品业",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 31,
            "name": "非金属矿物制品业",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 32,
            "name": "黑色金属冶炼和压延加工业",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 33,
            "name": "有色金属冶炼和压延加工业",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 34,
            "name": "金属制品业",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 35,
            "name": "通用设备制造业",
            "goods": 0,
            "supply": 0,
            "need": 3
          },
          {
            "id": 36,
            "name": "专用设备制造业",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 37,
            "name": "汽车制造业",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 38,
            "name": "铁路、船舶、航空航天和其他运输设备制造业",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 39,
            "name": "电气机械和器材制造业",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 40,
            "name": "计算机、通信和其他电子设备制造业",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 41,
            "name": "仪器仪表制造业",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 42,
            "name": "其他制造业",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 43,
            "name": "废弃资源综合利用业",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 44,
            "name": "金属制品、机械和设备修理业",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 45,
            "name": "电力、热力生产和供应业",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 46,
            "name": "燃气生产和供应业",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 47,
            "name": "水的生产和供应业",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 48,
            "name": "房屋建筑业",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 49,
            "name": "土木工程建筑业",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 50,
            "name": "建筑安装业",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 51,
            "name": "建筑装饰、装修和其他建筑业",
            "goods": 2,
            "supply": 0,
            "need": 0
          },
          {
            "id": 52,
            "name": "批发业",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 53,
            "name": "零售业",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 54,
            "name": "铁路运输业",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 55,
            "name": "道路运输业",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 56,
            "name": "水上运输业",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 57,
            "name": "航空运输业",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 58,
            "name": "管道运输业",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 59,
            "name": "多式联运和运输代理业",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 60,
            "name": "装卸搬运和仓储业",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 61,
            "name": "邮政业",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 62,
            "name": "住宿业",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 63,
            "name": "餐饮业",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 64,
            "name": "电信、广播电视和卫星传输服务",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 65,
            "name": "互联网和相关服务",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 66,
            "name": "软件和信息技术服务业",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 67,
            "name": "货币金融服务",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 68,
            "name": "资本市场服务",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 69,
            "name": "保险业",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 70,
            "name": "其他金融业",
            "goods": 1,
            "supply": 0,
            "need": 0
          },
          {
            "id": 71,
            "name": "房地产业",
            "goods": 1,
            "supply": 0,
            "need": 0
          },
          {
            "id": 72,
            "name": "租赁业",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 73,
            "name": "商务服务业",
            "goods": 2,
            "supply": 0,
            "need": 0
          },
          {
            "id": 74,
            "name": "研究和试验发展",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 75,
            "name": "专业技术服务业",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 76,
            "name": "科技推广和应用服务业",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 77,
            "name": "水利管理业",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 78,
            "name": "生态保护和环境治理业",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 79,
            "name": "公共设施管理业",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 80,
            "name": "土地管理业",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 81,
            "name": "居民服务业",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 82,
            "name": "机动车、电子产品和日用产品修理业",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 83,
            "name": "其他服务业",
            "goods": 0,
            "supply": 1,
            "need": 0
          },
          {
            "id": 84,
            "name": "教育",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 85,
            "name": "卫生",
            "goods": 1,
            "supply": 1,
            "need": 0
          },
          {
            "id": 86,
            "name": "社会工作",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 87,
            "name": "新闻和出版业",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 88,
            "name": "广播、电视、电影和录音制作业",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 89,
            "name": "文化艺术业",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 90,
            "name": "体育",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 91,
            "name": "娱乐业",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 92,
            "name": "中国共产党机关",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 93,
            "name": "国家机构",
            "goods": 0,
            "supply": 1,
            "need": 0
          },
          {
            "id": 94,
            "name": "人民政协、民主党派",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 95,
            "name": "社会保障",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 96,
            "name": "群众团体、社会团体和其他成员组织",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 97,
            "name": "基层群众自治组织及其他组织",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 98,
            "name": "国际组织",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 100,
            "name": "农、林、牧、渔业",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 101,
            "name": "采矿业",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 102,
            "name": "制造业",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 104,
            "name": "电力、热力、燃气及水生产和供应业",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 105,
            "name": "建筑业",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 106,
            "name": "批发和零售业",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 107,
            "name": "交通运输、仓储和邮政业",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 108,
            "name": "住宿和餐饮业",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 109,
            "name": "信息传输、软件和信息技术服务业",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 110,
            "name": "金融业",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 111,
            "name": "房地产",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 112,
            "name": "租赁和商务服务业",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 113,
            "name": "科学研究和技术服务业",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 114,
            "name": "水利、环境和公共设施管理业",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 115,
            "name": "居民服务、修理和其他服务业",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 116,
            "name": "教育",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 117,
            "name": "卫生和社会工作",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 118,
            "name": "文化、体育和娱乐业",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 119,
            "name": "公共管理、社会保障和社会组织",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 120,
            "name": "国际组织",
            "goods": 0,
            "supply": 0,
            "need": 0
          },
          {
            "id": 124,
            "name": "你好",
            "goods": 0,
            "supply": 0,
            "need": 0
          }
        ]
      };
      // 第一个
      // 初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));
 
      // 指定图表的配置项和数据
      var option = {
        title: {
          text: '商品数量',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [{
          name: 'Access From',
          type: 'pie',
          radius: ['40%', '70%'],
          data: [{
              value: data.goods_up,
              name: '已审核',
              itemStyle: {
                color: '#91CC75' // 自定义颜色1
              }
            },
            {
              value: data.goods_down,
              name: '未审核'
            }
          ]
        }]
      };
 
      // 使用配置项显示图表
      myChart.setOption(option);
 
 
      // 第二个
      var myChartTwo = echarts.init(document.getElementById('mainTwo'));
      var optionTwo = {
        title: {
          text: '事务所数量',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [{
          name: 'Access From',
          type: 'pie',
          radius: ['40%', '70%'],
          data: [{
              value: data.lawyer,
              name: '律师'
            },
            {
              value: data.accounting,
              name: '会计'
            },
            {
              value: data.bond,
              name: '证券'
            }
          ]
        }]
      };
      myChartTwo.setOption(optionTwo);
 
      // 第三个
      var myChartThree = echarts.init(document.getElementById('mainThree'));
      var optionThree = {
        title: {
          text: '客户数量',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [{
          name: 'Access From',
          type: 'pie',
          radius: ['40%', '70%'],
          data: [{
              value: data.user_up,
              name: '已审核'
            },
 
            {
              value: data.user_down,
              name: '待审核'
            }
          ]
        }]
      };
      myChartThree.setOption(optionThree);
 
      // 第四个
 
      var myChartFour = echarts.init(document.getElementById('mainFour'));
      var optionFour = {
        title: {
          text: '需求数量',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [{
          name: 'Access From',
          type: 'pie',
          radius: ['40%', '70%'],
          data: [{
              value: data.need_up,
              name: '已审核'
            },
 
            {
              value: data.need_down,
              name: '待审核'
            }
          ]
        }]
      };
      myChartFour.setOption(optionFour);
      // 第五个    
        var myChartFive = echarts.init(document.getElementById('mainFive'));
        var seriesData = [];
 
        for (var i = 0; i < data.bar.length; i++) {
          var item = data.bar[i];
          var seriesItem = {
            name: item.name,
            type: 'bar',
            data: [item.goods, item.supply, item.need]
          };
          seriesData.push(seriesItem);
        }
 
        var xAxisData = [];
        for (var i = 0; i < data.bar.length; i++) {
          xAxisData.push(data.bar[i].name);
        }
 
        var optionFive = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          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,
          legend: {
            data: ['Goods', 'Supply', 'Need'],
            itemGap: 5
          },
          grid: {
            top: '12%',
            left: '1%',
            right: '10%',
            containLabel: true
          },
          xAxis: [{
            type: 'category',
            data: xAxisData
          }],
          yAxis: [{
            type: 'value',
            name: 'Amount'
          }],
          dataZoom: [{
              show: true,
              start: 94,
              end: 100
            },
            {
              type: 'inside',
              start: 94,
              end: 100
            },
            {
              show: true,
              yAxisIndex: 0,
              filterMode: 'empty',
              width: 30,
              height: '80%',
              showDataShadow: false,
              left: '93%'
            }
          ],
          series: seriesData
        };
 
        myChartFive.setOption(optionFive);
    </script>
 
  </body>
</html>
目录
相关文章
|
6月前
|
开发框架 数据可视化 .NET
在Blazor中使用Chart.js快速创建图表
在Blazor中使用Chart.js快速创建图表
|
数据可视化
数据可视化图表开发:查看Echarts.js版本方法
数据可视化图表开发:查看Echarts.js版本方法
326 0
|
3月前
|
JavaScript Apache
js之图表使用
js之图表使用
28 1
|
3月前
|
数据可视化 JavaScript 前端开发
惊世奇迹!D3.js 铸就数据可视化辉煌,探索交互式图表与效果的奇幻之旅!
【8月更文挑战第12天】在数据驱动的时代,D3.js 作为领先的 JavaScript 库,以其强大的功能和灵活性在数据可视化领域脱颖而出。开发者可通过 D3.js 构建精美的交互式图表,如简单的柱状图或具备缩放拖拽功能的折线图,甚至将数据以地图、树形结构等独特形式展现。尽管学习曲线陡峭,但它在数据分析、商业智能等领域的广泛应用使其成为专业人士传达数据故事、辅助决策制定的强大工具。
96 1
|
5月前
|
JavaScript
JS图表生成以及点击修改图表样式
JS图表生成以及点击修改图表样式
|
5月前
|
JavaScript 容器
JS图表制作及点击按钮切换图表样式
JS图表制作及点击按钮切换图表样式
37 0
|
6月前
|
存储 JavaScript 前端开发
JavaScript复杂功能实现:实时数据可视化图表
JavaScript复杂功能实现:实时数据可视化图表
|
6月前
|
数据可视化 前端开发 JavaScript
探秘D3.js:数据可视化交互式图表与效果
数据可视化已经成为如今大数据时代的重要工具之一。它不仅可以更直观地呈现数据,还可以帮助人们更好地理解数据背后的含义。而D3.js则作为目前最流行的数据可视化库之一,其强大的功能和灵活性广受开发者青睐。本文将介绍如何使用D3.js创建交互式图表和可视化效果,以及如何利用其强大的API来进行个性化定制。
449 0
|
6月前
|
移动开发 JavaScript
echarts生成图表并下载为PDF文件(附带js源码地址)
echarts生成图表并下载为PDF文件(附带js源码地址)
134 0
|
6月前
|
数据可视化 JavaScript 前端开发
D3.js的交互式图表和可视化效果
在当今数据爆炸的时代,有一个强大的工具可以帮助我们更好地理解和使用数据:D3.js。D3.js是一个流行的JavaScript库,用于创建交互式图表和可视化效果。本文将介绍D3.js的基本特性以及如何使用它来创建高质量的数据可视化。