可视化项目

最新推荐文章于 2023-07-04 18:54:45 发布

VIP文章流川枫不风流

最新推荐文章于 2023-07-04 18:54:45 发布

阅读量472

点赞数

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/YasWestmere/article/details/128025762

版权

1.echarts图表制作

1.导入一个解压好的echarts.js

2.echarts官网有基本格式可以直接复制

例如以下代码

 <script src="./echarts/echarts.min.js"></script>
  </head>
  <body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div class="box" style="width: 800px;height:600px;"></div>
    <script type="text/javascript">
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.querySelector('.box'));

      // 指定图表的配置项和数据
      var option = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    </script>

若是其他表格可直接修改option里的所有内容即可,title{text}是标题 x,yAxis是x轴和y轴

2.折线图

 <script src="./echarts/echarts.min.js"></script>
</head>
<body>
     <div class="box" style="width: 800px; height: 600px;"></div>
      <script>
         const myChart = echarts.init(document.querySelector('.box'));

            // 指定图表的配置项和数据
                
           const option = {
           tooltip: {
             trigger: 'axis',
             position: function (pt) {
               return [pt[0], '10%'];
             }
           },
           // 标题
           title: {
             left: 'left',
             text: '2021年全学科薪资走势'
           },
           //工具栏
           toolbox: {
             feature: {
               dataZoom: {
                 yAxisIndex: 'none'
               },
               restore: {},
               saveAsImage: {}
             }
           },
           // x轴
           xAxis: {
             type: 'category',
             boundaryGap: false,
             data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
           },
           yAxis: {
             type: 'value',
             boundaryGap: [0, '100%']
           },
           // 缩放
           // dataZoom: [
           //   {
           //     type: 'inside',
           //     start: 0,
           //     end: 10
           //   },
           //   {
           //     start: 0,
           //     end: 10
           //   }
           // ],
           series: [
             {
               name: '学科薪资',
               type: 'line',
               symbol: 'emptyCircle',
               symbolSize: 10,
               sampling: 'lttb',
              smooth: true,
               itemStyle: {
                 color: '#16c1fc'
               },
               areaStyle: {
                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                   {
                     offset: 0,
                     color: '#a3dffd'
                   },
                   {
                     offset: 1,
                     color: '#eef9ff'
                   }
                 ])
               },
               data: [8000,8888,10000,12000,13000,11000,14000,15000,10000,9000,12000,15000]
             }
           ]
         };
         myChart.setOption(option);
    </script>

3.饼状图

<!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="./echarts/echarts.min.js"></script>
  </head>
  <body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div class="box" style="width: 800px;height:600px;"></div>
    <script type="text/javascript">
      // 基于准备好的dom，初始化echarts实例
      const myChart = echarts.init(document.querySelector('.box'));

      // 指定图表的配置项和数
      const option = {
  tooltip: {
  
    trigger: 'item'
  },
  title:{
    text:'2021年薪资分布',
    left:10,
    top: 10
  },
  legend: {
     bottom: '5%',
    left: 'center',
    
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['50%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '40',
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1048, name: '一万以下' },
        { value: 735, name: '1-1.5万' },
        { value: 580, name: '1.5-2万' },
        { value: 484, name: '2以上万' },
    
      ]
    }
  ]
};
  
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    </script>

4.柱状图

 <script src="./echarts/echarts.min.js"></script>
  </head>
  <body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div class="box" style="width: 800px;height:600px;"></div>
    <script type="text/javascript">
      // 基于准备好的dom，初始化echarts实例
      const myChart = echarts.init(document.querySelector('.box'));

      // 指定图表的配置项和数据
      const option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {},
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      data: ['张三', '李四', '王五', '赵六', 'ikun']
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: '期望薪资',
      type: 'bar',
      emphasis: {
        focus: 'series'
      },
      data: [10000, 12332, 11301, 13134, 12390, 1430,12320],
        itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#83bff6' },
          { offset: 1, color: '#188df0' },
        ])
        },
    },
    {
      name: '就业薪资',
      type: 'bar',
      // 鼠标点谁谁高亮,其他变淡
      stack: 'Ad',
      emphasis: {
        focus: 'series'
      },
      data: [11000, 13292, 12101, 13414,