数据可视化（Echart）：柱状图、折线图、饼图等六种基本图表的特点及适用场合...

最新推荐文章于 2024-06-29 00:28:00 发布

weixin_30618985

最新推荐文章于 2024-06-29 00:28:00 发布

阅读量2.3k

点赞数

文章标签： json javascript ViewUI

原文链接：http://www.cnblogs.com/renxiuxing/p/9591724.html

版权

数据可视化（Echart）

柱状图、折线图、饼图等六种基本图表的特点及适用场合

参考网址
效果图

源码

  <!DOCTYPE html>
  <html>

  <head>
  <meta charset="utf-8">
  <title>ECharts</title>
  <!-- 引入 echarts.js -->
  <script src="js/echarts.min.js"></script>
  </head>

  <body>
  <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  <div id="main" style="width: 600px;height:400px;"></div>

  <div id="main2" style="width: 600px;height:400px;left: 700px;top: 0px;position: absolute;"></div>

  <div id="main3" style="width: 600px;height:400px;left: 0px;top: 400px;position: absolute;"></div>

  <div id="main4" style="width: 600px;height:400px;left: 700px;top: 400px;position: absolute;"></div>

  <script type="text/javascript">
      //模拟后台传来的json
      var jsondata =
          '{"sales":[{"name":"衬衫","num":"70"},{"name":"羊毛衫","num":"27"},{"name":"裤子","num":"36"},{"name":"高跟鞋","num":"18"},{"name":"袜子","num":"85"},{"name":"棉袄","num":"105"}]}';
      var jsonobj = JSON.parse(jsondata);

      //获取json中的数值    
      var dataName = [];
      var dataNum = [];
      var temp = jsonobj;

      //匿名函数解析json串中的数值，关键点
      (function() {
          for(var i = 0; i < temp.sales.length; i++) {
              dataName.push(temp.sales[i].name);
              dataNum.push(temp.sales[i].num);
          }
      })();

      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));
      var myChart2 = echarts.init(document.getElementById('main2'));

      //折线图
      var option = {
          title: {
              text: '衣物销量统计'
          },
          tooltip: {},
          legend: {
              data: ['销量']
          },

          xAxis: {
              //x轴字体颜色
              /*axisLine: {
                  lineStyle: {
                      color: '#C50023'
                  }
              },*/

              data: dataName,
          },
          yAxis: [{
              //定义y轴最大与最小值
              min: 0,
              max: 120,
              type: 'value',
              name: '日销量（万）',
              splitNumber: 5
          }],

          series: [{

              //折线上数字
              /* label: {
                   normal: {
                       show: true,
                       position: 'top',
                       formatter:100
                   }
               },*/

              // 折线颜色
              /*itemStyle: {
                  normal: {
                      //线上。的颜色
                      color: '#33CCFF',
                      lineStyle: {
                          //线的颜色
                          color: '#33CCFF'
                      }
                  }
              },*/

              //顶上小图标名称
              name: '销量',
              type: 'line',
              data: dataNum,

              //平均值
              markLine: {
                  data: [{
                      type: 'average',
                      name: '平均值'
                  }]
              },

          }]
      };

      myChart.setOption(option);

      //柱状图
      // 指定图表的配置项和数据
      var option2 = {
          title: {
              text: '衣物销量统计'
          },
          tooltip: {},
          legend: {
              data: ['销量']
          },
          xAxis: {
              data: dataName,
          },
          yAxis: {
              type: 'value',
              name: '日销量（万）',
              splitNumber: 5
          },
          series: [{
              name: '销量',
              type: 'bar',
              //柱状宽度
              barWidth: 20,
              data: dataNum,
          }]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart2.setOption(option2);

      //饼状图
      echarts.init(document.getElementById('main3')).setOption({
          title: {
              text: '衣物销量统计',
              subtext: '日销量（万）',
              x: 'center',
              //背景色
              //backgroundColor:'rgba(12,121,123,0.1)'
          },
          series: [{
              name: '详情',
              type: 'pie',

              //饼状图的大小
              //radius : '55%',

              center: ['50%', '60%'],
              data: (function() { //饼状图需要函数解析数字内的值
                  var res = [];
                  var len = dataName.length;
                  while(len--) {
                      res.push({
                          name: dataName[len],
                          value: dataNum[len]
                      });
                  }
                  return res;
              })()
          }]
      })

      echarts.init(document.getElementById('main4')).setOption({
          title: {
              text: '衣物销量统计'
          },
          tooltip: {},
          legend: {
              data: ['销量']
          },
          xAxis: {
              data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
          },
          yAxis: {
              type: 'value',
              name: '日销量（万）',
              min: 0,
              max: 4,
              axisLabel: {
                  formatter: function(value) {
                      var texts = [];
                      if(value == 0) {
                          texts.push('woo');
                      } else if(value <= 1) {
                          texts.push('好');
                      } else if(value <= 2) {
                          texts.push('很好');
                      } else if(value <= 3) {
                          texts.push('非常好');
                      } else {
                          texts.push('完美');
                      }
                      return texts;

                  }
              }
          },
          series: [{
              name: '销量',
              type: 'bar',
              //柱状宽度
              //barWidth: 20,
              data: [1, 4, 2, 3, 2, 0]
          }]
      })
      </script>
  </body>
  </html>

转载于:https://www.cnblogs.com/renxiuxing/p/9591724.html