echarts常用类型及参数说明

VIP文章皓月当空hy

已于 2022-07-26 08:48:54 修改

阅读量388

点赞数

分类专栏： echarts 文章标签： echarts

于 2022-07-20 16:36:21 首次发布

本文链接：https://blog.csdn.net/qq_33911541/article/details/125895315

版权

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <title>echarts折线、柱状图案例</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .fontSize{
            color: red;
            font-weight: bold;
        }
    </style>
    <script src='./jq.js'></script>
    <script src='./echart.js'></script>
</head>
<body>
<div class="plan-mon" id="jd-charts-month" style="width: 310px; height: 50px;"></div>
<br>
<br>
<br>
<br>
<br>
<p class="fontSize">坐标轴字体、刻度、刻度线、图例、柱子上方数值样式设置</p>
<div id="main" style="width:900px;height:300px"></div>
<br>
<br>
<br>
<br>
<br>
<p class="fontSize">一个坐标上多个柱子</p>
<div id="line-chart" style="height: 270px"></div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p class="fontSize">三种数据堆叠在一起柱状图、<span style="color: green">横坐标名称太长这行处理</span></p>
<div id="line-chart4" style="height: 270px"></div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<!---------------------------------------------------------------折线图------------------------------------------------------------>
<div id="line-chart2" style="height: 270px"></div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p class="fontSize">三根线折线图，带背景颜色</p>
<div id="line-chart3" style="height: 270px"></div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p class="fontSize">根据后台返回数据求出最大值，并且把最大值/最小值的折线图区域高亮显示</p>
<div id="brokenLine" style="height: 270px"></div>
<script>
    showchart2();   //图表执行
    //图表
    function showchart2(){
        var myChart = echarts.init(document.getElementById('jd-charts-month'));
        let barWidth = 18

        /*
        //备份本月碳排量概况 option
        let option = {
              xAxis: {
                splitLine: {
                  show: false,
                },
                axisLabel: {
                  show: false,
                },
                axisTick: {
                  show: false,
                },
                axisLine: {
                  show: false,
                },
              },
              grid: {
                containLabel: true,
                left: 30,
                top: 0,
                right: 100,
                bottom: 0,
              },
              yAxis: [
                {
                  inverse: true,
                  axisLine: {
                    show: false,
                  },
                  axisTick: {
                    show: false,
                  },
                  axisLabel: {
                    // margin: 50,
                    show: false,
                    textStyle: {
                      fontSize: 14,
                      color: '#fff',
                    },
                  },

                  data: ['本月'],
                },
              ],
              series: [
                {
                  //内
                  type: 'bar',
                  barWidth,
                  legendHoverLink: false,
                  symbolRepeat: true,
                  silent: true,
                  itemStyle: {
                    color: {
                      type: 'linear',
                      x: 0,
                      y: 0,
                      x2: 1,
                      y2: 0,
                      colorStops: [
                        {
                          offset: 0,
                          color: '#01fcfe', // 0% 处的颜色
                        },
                        {
                          offset: 0.5,
                          color: '#bbfe42', // 100% 处的颜色
                        },
                        {
                          offset: 1,
                          color: '#fbff01', // 100% 处的颜色
                        },
                      ],
                    },
                  },
                  label: {
                    show: true,
                    position: 'right', //每一条的数据位置
                    // padding: [0, 0, 0, 100],
                    formatter: (params) => {
                      return params.value
                    },
                    textStyle: {
                      color: '#fbff01',
                      fontSize: 18,
                      fontFamily: 'Impact',
                    },
                  },
                  data: xData,
                  z: 1,
                  animationEasing: 'elasticOut',
                },
                {
                  //分隔
                  type: 'pictorialBar',
                  // itemStyle: {
                  //   color: '#14e061',
                  // },
                  symbolRepeat: 'fixed',
                  symbolMargin: 2,
                  symbol: 'roundRect',
                  symbolClip: true,
                  symbolSize: [2, barWidth],
                  symbolPosition: 'start',
                  symbolOffset: [0, 0],
                  data: xData,
                  z: 2,
                  animationEasing: 'elasticOut',
                },
              ],
              title: {
                text: '本月',
                x: -5,
                y: -3,
                textStyle: {
                  fontSize: 14,
                  fontStyle: 'normal',
                  fontWeight: 'normal',
                  color: '#fff',
                },
              },
            }*/

        let option = {
            xAxis: {
                splitLine: {
                    show: false,
                },
                axisLabel: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: false,
                },
            },
            grid: {
                containLabel: true,
                left: 30,
                top: 0,
                right: 100,
                bottom: 0,
            },
            yAxis: [
                {
                    inverse: true,
                    axisLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabe