echarts的常用案例

最新推荐文章于 2024-06-20 09:30:03 发布
最新推荐文章于 2024-06-20 09:30:03 发布
阅读量1.1k 收藏 4
点赞数 1
分类专栏： js代码 文章标签： echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wyk760629476/article/details/118483075
版权

安装依赖后引入echarts

// mian.js
import echarts from 'echarts'//引入
Vue.prototype.$echarts = echarts// 挂在vue上面


直接引入js 

<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>

在文件中创建图表指定宽高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图表</title>
</head>
<body>
<div id="chart1" style="width:600px; height: 800px;"></div>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<!--直接引入js -->
<script type="text/javascript">
    //指定图标的配置和数据，具体内容在后面配置中
    var option = {}

    //初始化echarts实例
    var myChart = echarts.init(document.getElementById('chart1'));

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

</body>
</html>


 

  1. 雷达图
    option: {
  title: {
    text: '关键财务指标',
    textStyle: {
      color: 'rgba(221,221,221,1)', // 标题颜色
      fontSize: 14,
      lineHeight: 20
    }
  },
  // 图表的位置
  grid: {
    position: 'center'
  },
  radar: {
    // shape: 'circle', // 设置雷达图底线为圆形
    splitNumber: 3, // 雷达图圈数设置
    name: {
      textStyle: {
        color: 'rgb(51,148,201)'
      }
    },
    // 设置雷达图中间射线的颜色
    axisLine: {
      lineStyle: {
        color: 'rgb(51,148,201)'
      }
    },
    indicator: [
      { name: '实际报销率', max: 60 },
      { name: '资产负债率', max: 60 },
      { name: '固定资产折旧率', max: 60 },
      { name: '收支比率', max: 60 },
      { name: '销售利润率', max: 60 },
      { name: '应付付款率', max: 60 }
    ],
    // 雷达图背景的颜色, 在这儿随便设置了一个颜色, 完全不透明度为0, 就实现了透明背景
    splitArea: {
      show: false,
      areaStyle: {
        color: 'rgba(255,0,0,0)' // 图表背景的颜色
      }
    },
    splitLine: {
      show: true,
      lineStyle: {
        width: 1,
        color: 'rgba(131,141,158,.1)' // 设置网格的颜色
      }
    }
  },
  series: [{
    name: '雷达图', // tooltip中的标题
    type: 'radar', // 表示是雷达图
    symbol: 'circle', // 拐点的样式, 还可以取值'rect','angle'等
    symbolSize: 1, // 拐点的大小
    areaStyle: {
      normal: {
        color: [new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: 'rgb(86,191,200)'
        }, {
          offset: 1,
          color: 'rgb(51,148,201)'
        }])
        ],
        width: 1,
        opacity: 0.6
      }
    },
    data: [
      {
        value: [40, 51, 45, 48, 48, 54],
        // 设置区域边框和区域的颜色
        itemStyle: {
          normal: {
            color: [new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgb(86,191,200)'
            }, {
              offset: 1,
              color: 'rgb(51,148,201)'
            }])
            ],
            lineStyle: {
              color: 'rgba(1,87,134,0.3)'
            }
          }
        },
        // 在拐点处显示数值
        label: {
          normal: {
            show: true,
            formatter: (params) => {
              return params.value
            }
          }
        }
      }
    ]
  }]
}

  2. 柱状图
    option = {
  bottom: '50%',
  title: {
    text: '近13个月销售利润走势',
    textStyle: {
      color: 'rgba(221,221,221,1)', // 标题颜色
      fontSize: 14,
      lineHeight: 20
    }
  },
  grid: {
    left: '4%',
    right: '4%',
    bottom: '15%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    axisLabel: {
      textStyle: {
        color: '#838D9E'
      },
      formatter: function (value) {
        return value.split('').join('\n')
      }// 竖直显示x轴文字
    },
    data: ['新疆', '甘肃省', '贵州省', '江苏省', '浙江省', '福建省', '广东省', '湖北省', '山东省', '河北省', '北京市']
  },
  yAxis: [
    {
      type: 'value',
      name: '单位：亿元',
      nameTextStyle: {
        color: '#838D9E'
      },
      splitLine: { show: false }, // 不显示背景数据分割线
      axisLabel: {
        textStyle: {
          color: '#838D9E'
        }
      }
    }
  ],
  graphic: [
    { // 一个图形元素，类型是 group，可以嵌套子节点。
      type: 'group',
      children: [
        {
          type: 'text',
          style: {
            fill: '#1f79ac',
            text: '当月销售利润：',
            font: '1em "STHeiti", sans-serif',
            x: 100,
            y: 30
          }
        }, {
          type: 'text',
          style: {
            fill: '#fff',
            text: '1.05',
            font: '1.2em "STHeiti", sans-serif',
            x: 200,
            y: 30
          }
        }, {
          type: 'text',
          style: {
            fill: '#1f79ac',
            text: '亿元',
            font: '1em "STHeiti", sans-serif',
            x: 240,
            y: 30
          }
        }, {
          type: 'text',
          style: {
            fill: '#1f79ac',
            text: '同比变化：',
            font: '1em "STHeiti", sans-serif',
            x: 300,
            y: 30
          }
        }, {
          type: 'text',
          style: {
            fill: '#ce9126',
            text: '34.56%',
            font: '1.2em "STHeiti", sans-serif',
            x: 370,
            y: 30
          }
        }, {
          type: 'image',
          style: {
            image: require('./img/right1-2.png'),
            fill: 'red',
            width: 30,
            height: 30,
            x: 440,
            y: 22
          }
        }
      ]
    }
  ], // 图层
  series: [
    {
      type: 'bar',
      barWidth: 20, // 柱宽度
      data: [200, 150, 100, 250, 150, 100, 100, 200, 150, 200, 160],
      itemStyle: {
        normal: { // 柱状图颜色
          color: '#b051ad'
        }
      }
    }
  ]
}
  3. 横向柱状图
    option = {
  title: {
    text: '产值GDP （单位： 亿元）',
    textStyle: {
      color: 'rgba(221,221,221,1)', // 标题颜色
      fontSize: 14,
      lineHeight: 20
    }
  },
  grid: {
    left: '4%',
    right: '4%',
    containLabel: true,
    bottom: '15%'
  },
  tooltip: {},
  xAxis: {
    axisLabel: {// 坐标轴刻度标签的相关设置
      textStyle: {
        color: '#d6e7d9'
      }
    },
    splitLine: {
      show: false // 是否显示坐标轴刻度背景线
    }

  },
  yAxis: {
    data: ['长期资产', '波动资产', '无形资产', '固定资产', '其他资产'],
    axisLabel: {// 坐标轴刻度标签的相关设置
      textStyle: {
        color: '#d6e7d9',
        align: 'right',
        width: 50,
        fontSize: 12
      }
    }
  },

  series: [{
    type: 'bar',
    barWidth: 15, // 柱宽度
    data: [100, 200, 100, 300, 100],
    itemStyle: {
      normal: { // 柱状图颜色
        color: '#0076e2'
      }
    }
  }]
}

  4. 折线图
    option = {
  title: {
    text: '利润 （单位： 亿元）',
    textStyle: {
      color: 'rgba(221,221,221,1)', // 标题颜色
      fontSize: 14,
      lineHeight: 20
    }
  },
  tooltip: {},
  legend: {
    data: ['利润 （单位： 亿元）']
  },
  xAxis: {
    data: ['2016', '2017', '2018', '2019', '2020'],
    axisLabel: {// 坐标轴刻度标签的相关设置
      textStyle: {
        color: '#d6e7d9',
        width: '100%'
      }
    }
  },
  yAxis: {
    splitArea: { show: false },
    splitLine: { show: false },
    axisLabel: {// 坐标轴刻度标签的相关设置
      textStyle: {
        color: '#d6e7d9',
        align: 'right',
        fontSize: 12
      }
    }
  },
  series: [{
    type: 'line',
    barWidth: 10, // 柱宽度
    data: [100, 300, 350, 300, 400],
    smooth: true,
    areaStyle: {
      normal: {
        color: {
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
            offset: 0,
            color: '#269dc8' // 0% 处的颜色
          }, {
            offset: 0.7,
            color: '#0c1928' // 100% 处的颜色
          }]
        }
      }
    }, // 填充区域样式
    itemStyle: {
      normal: { // 柱状图颜色
        color: '#269dc8'
      }
    }
  }]
}

  5. 多条折线图
    option = {
  title: {
    text: '航天总趋势分析',
    textStyle: {
      color: 'rgba(221,221,221,1)', // 标题颜色
      fontSize: 14,
      lineHeight: 20
    }
  },
  legend: {
    icon: 'roundRect',
    textStyle: {
      color: 'rgba(221,221,221,1)' // 示例颜色
    },
    top: 40,
    data: ['总资产', '营业额', '纳税额', '利润']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [{
    axisLabel: {
      textStyle: {
        color: '#838D9E'
      }
    },
    type: 'category',
    boundaryGap: false,
    splitLine: { show: false },
    data: [2016, 2017, 2018, 2019, 2020]
  }],
  yAxis: [{
    axisLabel: {
      textStyle: {
        color: '#838D9E'
      }
    },
    splitLine: { show: false }
    // type: 'value'
  }],
  series: [{
    name: '总资产',
    type: 'line',
    smooth: true, // 平滑的
    icon: 'line',
    itemStyle: {
      normal: {
        color: [new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: '#1f838b'
        }, {
          offset: 1,
          color: 'rgb(51,148,201)'
        }])
        ],
        lineStyle: {
          color: '#1f838b'
        }
      }
    }, // 设置折现颜色
    stack: '总量',
    areaStyle: { normal: {} },
    data: [500, 420, 200, 134, 240, 330, 210]
  },
    {
      name: '营业额',
      type: 'line',
      smooth: true, // 平滑的
      itemStyle: {
        normal: {
          color: '#0b79b5',
          lineStyle: {
            color: '#0b79b5'
          }
        }
      }, // 设置折现颜色
      stack: '总量',
      areaStyle: { normal: {} },
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: '纳税额',
      type: 'line',
      smooth: true, // 平滑的
      itemStyle: {
        normal: {
          color: '#4556a4',
          lineStyle: {
            color: '#4556a4'
          }
        }
      }, // 设置折现颜色
      stack: '总量',
      areaStyle: { normal: {} },
      data: [150, 232, 101, 300, 190, 330, 410]
    },
    {
      name: '利润',
      type: 'line',
      smooth: true, // 平滑的
      itemStyle: {
        normal: {
          color: '#95cdef',
          lineStyle: {
            color: '#95cdef'
          }
        }
      }, // 设置折现颜色
      stack: '总量',
      areaStyle: { normal: {} },
      data: [320, 332, 301, 334, 230, 330, 320]
    }
  ]
}

     
  6. 柱状图和折线图在一个页面
    option:
{
  title: {
    text: '航天存款趋势分析',
    textStyle: {
      color: 'rgba(221,221,221,1)', // 标题颜色
      fontSize: 14,
      lineHeight: 20
    }
  },
  grid: {
    left: '4%',
    right: '4%',
    bottom: '15%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    axisLabel: {
      textStyle: {
        color: '#838D9E'
      }
    },
    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
  },
  yAxis: [
    {
      type: 'value',
      name: '单位：亿元',
      nameTextStyle: {
        color: '#838D9E'
      },
      splitLine: { show: false }, // 不显示背景数据分割线
      axisLabel: {
        textStyle: {
          color: '#838D9E'
        }
      }
    },
    {
      splitLine: { show: false },
      nameTextStyle: { color: '#838D9E' },
      type: 'value',
      name: '单位：%',
      position: 'right',
      min: 0,
      max: 100, // 百分比的最大最小值
      axisLabel: {
        textStyle: {
          color: '#4572A7'
        },
        show: true,
        interval: 'auto',
        formatter: '{value}%'
      },
      show: true
    }
  ],
  series: [
    {
      type: 'line',
      // smooth: true,// 不是平滑的
      icon: 'line',
      itemStyle: {
        normal: {
          color: '#49a8e2',
          lineStyle: {
            color: '#49a8e2'
          }
        }
      }, // 设置折现颜色
      data: [50, 100, 90, 180, 140, 80, 80, 180, 130, 170, 140, 150]
    },
    {
      type: 'bar',
      barWidth: 25, // 柱宽度
      data: [200, 150, 100, 250, 150, 100, 100, 200, 150, 200, 160, 180],
      itemStyle: {
        normal: { // 柱状图颜色
          color: '#235790'
        }
      }
    }
  ]
}

  7. 环形图
    option = {
  // 标题
  title: {
    text: '回款情况',
    textStyle: {
      color: 'rgba(221,221,221,1)', // 标题颜色
      fontSize: 14,
      lineHeight: 20
    }
  },
  grid: {
    left: '4%',
    right: '4%',
    bottom: '15%',
    containLabel: true
  },
  // graphic 是原生图形元素组件。可以支持的图形元素包括：image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,
  graphic: [
      {
        type: 'text', // [ default: image ]用 setOption 首次设定图形元素时必须指定。image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,
        top: 'center', // 描述怎么根据父元素进行定位。top 和 bottom 只有一个可以生效。如果指定 top 或 bottom, 则 shape 里的 y、cy 等定位属性不再生效。『父元素』是指：如果是顶层元素, 父元素是 echarts 图表容器。如果是 group 的子元素, 父元素就是 group 元素。
        left: 'center', // 同上
        style: {
          fill: '#fff',
          width: 50,
          height: 60,
          text: ['47%', '实收账款占比']
        }
      },
    { // 一个图形元素，类型是 group，可以嵌套子节点。
      type: 'group',
      children: [
        {
          type: 'text',
          style: {
            fill: '#0c7ab5',
            text: '应收款率',
            font: '1em "STHeiti", sans-serif',
            x: 100,
            y: 50
          }
        }, {
          type: 'text',
          style: {
            fill: '#fff',
            text: '2.13',
            font: '1.4em "STHeiti", sans-serif',
            x: 100,
            y: 70
          }
        }, {
          type: 'text',
          style: {
            fill: '#fff',
            text: '亿元',
            font: '1em "STHeiti", sans-serif',
            x: 140,
            y: 70
          }
        }, {
          type: 'image',
          style: {
            image: require('./img/centerHeader1-1.png'),
            width: 30,
            height: 30,
            x: 50,
            y: 50
          }
        }
      ]
    }
  ], // 图层
  // 系列列表
  series: [{
    type: 'pie', // 系列类型
    radius: ['30%', '45%'], // 饼图的半径, 数组的第一项是内半径, 第二项是外半径。[ default: [0, '75%'] ]
    hoverAnimation: true, // 是否开启 hover 在扇区上的放大动画效果。[ default: true ]
    color: ['#4456a2', '#3B96CB', '#26609f', '#0b79b4'], // 圆环图的颜色
    label: { // 饼图图形上的文本标签, 可用于说明图形的一些数据信息, 比如值, 名称等.
      normal: {
        show: true, // 是否显示标签[ default: false ]
        formatter: (par) => {
          return par.name + '\n' + par.value + '%'
        } // 标签内容
      }
    },
    labelLine: { // 标签的视觉引导线样式,在 label 位置 设置为'outside'的时候会显示视觉引导线。
      normal: {
        length: 0 // 在 label 位置 第一段折现的长度
      }
    },
    data: [{
      name: '分支机构1',
      value: 193
    }, {
      name: '分支机构2',
      value: 178
    }, {
      name: '控股企业2',
      value: 140
    }, {
      name: '控股企业1',
      value: 127
    }] // 系列中的数据内容数组。
  }]
}

  8. 中国地图
    import 'echarts/map/js/china'
randomData: function () {
  return Math.round(Math.random() * 1000)
}

option = {
  geo: {
    map: 'china',
    roam: false, // 一定要关闭拖拽
    zoom: 1.23,
    center: [105, 36], // 调整地图位置
    label: {
      normal: {
        show: false, // 关闭省份名展示
        fontSize: '10',
        color: 'rgba(0,0,0,0.7)'
      },
      emphasis: {
        show: false
      }
    },
    itemStyle: {
      normal: {
        areaColor: '#002f67', // 地图颜色
        borderColor: '#389dff', // 边框颜色
        borderWidth: 1, // 设置外层边框
        shadowBlur: 5,
        shadowOffsetY: 8,
        shadowOffsetX: 0,
        shadowColor: '#0172fe'// 阴影颜色
      },
      emphasis: {
        areaColor: '#184cff',
        shadowOffsetX: 0,
        shadowOffsetY: 0,
        shadowBlur: 5,
        borderWidth: 0,
        shadowColor: 'rgba(83,230,59,0.5)'
      }
    }
  },
  series: [
    {
      type: 'map',
      map: 'china',
      roam: false,
      zoom: 1.23,
      center: [105, 36],
      // geoIndex: 1,
      // aspectScale: 0.75, //长宽比
      showLegendSymbol: false, // 存在legend时显示
      label: {
        normal: {
          show: false
        },
        emphasis: {
          show: false,
          textStyle: {
            color: '#fff'
          }
        }
      },
      itemStyle: {
        normal: {
          areaColor: '#002f67',
          borderColor: '#389dff',
          borderWidth: 0.5
        },
        emphasis: {
          areaColor: '#013068',
          shadowOffsetX: 0,
          shadowOffsetY: 0,
          shadowBlur: 5,
          borderWidth: 0,
          shadowColor: 'rgba(86,191,200,0.5)'
        }
      },
      data: [
        { name: '上海', value: this.randomData() },
        { name: '北京', value: '100' },
        { name: '天津', value: this.randomData() },
        { name: '重庆', value: this.randomData() },
        { name: '河北', value: this.randomData() },
        { name: '河南', value: this.randomData() },
        { name: '云南', value: this.randomData() },
        { name: '辽宁', value: this.randomData() },
        { name: '黑龙江', value: this.randomData() },
        { name: '湖南', value: this.randomData() },
        { name: '安徽', value: this.randomData() },
        { name: '山东', value: this.randomData() },
        { name: '新疆', value: this.randomData() },
        { name: '江苏', value: this.randomData() },
        { name: '浙江', value: this.randomData() },
        { name: '江西', value: this.randomData() },
        { name: '湖北', value: this.randomData() },
        { name: '广西', value: this.randomData() },
        { name: '甘肃', value: this.randomData() },
        { name: '山西', value: this.randomData() },
        { name: '内蒙古', value: this.randomData() },
        { name: '陕西', value: this.randomData() },
        { name: '吉林', value: this.randomData() },
        { name: '福建', value: this.randomData() },
        { name: '贵州', value: this.randomData() },
        { name: '广东', value: this.randomData() },
        { name: '青海', value: this.randomData() },
        { name: '西藏', value: this.randomData() },
        { name: '四川', value: this.randomData() },
        { name: '宁夏', value: this.randomData() },
        { name: '海南', value: this.randomData() },
        { name: '台湾', value: this.randomData() },
        { name: '香港', value: this.randomData() },
        { name: '澳门', value: this.randomData() }
      ]
    }
  ]
}

  9. 极地坐标
    option = {
  title: {
    text: '市场地位',
    textStyle: {
      color: 'rgba(221,221,221,1)', // 标题颜色
      fontSize: 14,
      lineHeight: 20
    }
  },
  angleAxis: {
    show: true,
    splitLine: {
      show: true
    }
  },
  color: [new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
    offset: 0,
    color: 'rgb(86,191,200)'
  }, {
    offset: 1,
    color: 'rgb(51,148,201)'
  }])
  ],
  radiusAxis: {
    axisLine: { show: true },
    axisTick: { show: true },
    type: 'category',
    data: ['交通', '电力', '煤炭', '建筑'],
    z: 10
  }, // 极地坐标
  polar: {},
  series: [{
    type: 'bar',
    data: [1, 2, 3, 4],
    coordinateSystem: 'polar',
    name: 'A',
    stack: 'a',
    emphasis: {
      focus: 'series'
    }
  }]
}

常用配置：

  1. 图层
    graphic:[
  { // 一个图形元素，类型是 group，可以嵌套子节点。
    type: 'group', // group图层组， image图片， text文本，rect矩形，circle圆形，ring环，sector扇形，arc圆弧，polygon几何，polyline折线，line线，bezierCurve二次或三次贝塞尔曲线。
    children: [
      {
        type: 'text',
        style: {
          fill: '#1f79ac', // 填充颜色
          text: '262', // 显示文字
          font: '3em "STHeiti", sans-serif', // 字体字号
          x: 50, // x轴位置
          y: 50// y轴位置
        }
      }, {
        type: 'text',
        style: {
          fill: '#1f79ac',
          text: '亿元',
          font: '1.2em "STHeiti", sans-serif',
          x: 130,
          y: 65
        }
      }, {
        type: 'image',
        style: {
          image: require('./img/left1-1.png'),
          width: 100,
          height: 150,
          x: 50,
          y: 100
        }
      }
    ]
  }
], // 图层

  2. 渐变色
    option:{ series: [{
  type: 'line',
  barWidth: 10, // 柱宽度
  data: [100, 300, 350, 300, 400],
  smooth: true, //平滑的折线
  areaStyle: {
    normal: {
      color: {
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [{
          offset: 0,
          color: '#269dc8' // 0% 处的颜色
        }, {
          offset: 0.7,
          color: '#0c1928' // 100% 处的颜色
        }]
      }
    }
  }, // 填充区域样式
  itemStyle: {
    normal: { // 柱状图颜色
      color: '#269dc8'
    }
  }
}

wyk760629476
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
Java面试基础篇
m0_67392010的博客
07-29 3604
先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。深知大多数初中级java工程师，想要升技能，往往是需要自己摸索成长或是报班学习，但对于培训机构动则近万元的学费，着实压力不小。因此我收集了一份《java开发全套学习资料》送给大家，初衷也很简单，就是希望帮助到想自学又不知道该从何学起的朋友，同时减轻大家的负担。Java的强引用、弱引用、软引用、虚引用。Java语言基础常识。Java12新特性。JavaIO详解。...
echarts 实例
qq_43343499的博客
10-29 1930
echarts 实例 官方文档地址:/echarts.apache.org 一个网页中可以创建多个 echarts 实例。每个 echarts 实例 中可以创建多个图表和坐标系等等（用 option 来描述）。准备一个 DOM 节点（作为 echarts 的渲染容器），就可以在上面创建一个 echarts 实例。每个 echarts 实例独占一个 DOM 节点。 系列（series） 系列（series）是很常见的名词。在 echarts 里，系列（series）是指：一组数值以及他们映射成的图。“系列”
Echarts入门实例
m0_61104769的博客
07-29 683
本文介绍了Echarts的入门案例，以及在传智健康项目中对Echarts的使用
echarts完整实例
10-20
这是我实际项目中的一个echarts完整实例，将echarts数值通过json方式从后台数据库中读取。
Echarts各类图表常用配置项说明，附示例代码
最新发布
共同学习，共同成长
06-20 1385
​大家好，我是前端菜鸟的自我修养！今天给大家分享【Echarts各类图表常用配置项说明 】，并提供具体代码帮助大家深入理解，彻底掌握！
【echarts】 label 初始化 文字换行
weixin_37624436的博客
12-06 593
functionline_feed(str,num){ letnewParamsName="";//最终拼接成的字符串 letparamsNameNumber=str.length;//实际标签的个数 letprovideNumber=num; letrowNumber=Math.ceil(paramsNameNumber/p...
echarts入门教程（超级详细带案例）
热门推荐
m0_55734030的博客
10-27 10万+
1.echarts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。ECharts最初由百度团队开源，并于2018年初捐赠给Apache基金会，成为ASF孵化级项目。 2.学习一项技术的关键，还是需要多读官方文档，官网链接Apache ECharts,与之类似的图表库还有D3，HeightCharts。 3.echarts的下载 （1）从 npm 获取 （2）从 CDN 获取 （3）从 GitHub 获取 （2）color调色盘 在 option 中设
echarts 常用表 示例
lyinshaofeng的博客
10-28 925
echarts 常用表 示例
Echarts入门案例
易烊千玺❥
11-13 719
SpringDataJpa+angular.js+Echarts入门案例 因为我们的数据是从数据库读取出来的，所以我们先创表 CREATE TABLE watchway( id INT(4) PRIMARY KEY AUTO_INCREMENT, VALUE INT(4), NAME VARCHAR(20) ) CREATE TABLE cityInfo( id INT(4) PRIMARY K...
Echarts常用案例
07-22
本压缩包“Echarts常用案例”可能包含了一系列使用ECharts实现的典型应用示例，旨在帮助开发者更好地理解和运用ECharts进行数据展示。 ECharts的核心知识点包括： 1. **基本概念**：ECharts图表主要由容器（chart...
echarts常用方法及案例代码.md
06-13
echarts常用方法及案例代码
Echarts制作饼状图案例
06-26
本案例主要关注如何使用ECharts来创建饼状图。 饼状图是一种常用的数据可视化工具，用于展示数据的构成比例。在ECharts中，饼状图可以清晰地展示每个分类所占总体的比例，非常适合用来对比不同类别在整体中的占比。...
Echarts封装案例.zip
05-04
在这个压缩包中，你可以找到封装的JS文件，这个文件可能包含了对ECharts的初始化、配置、数据加载、事件处理等常用操作的封装。通过阅读和理解这个JS文件，你可以学习到如何将ECharts的基本功能进行模块化处理，以及...
echarts（15套可视化大屏模板+18个图表案例）
03-19
15套精美的数据可视化大屏 + 18个echarts图表案例，主要关于数据监测、数据统计、数据分析、大数据、疫情、物流、物流大数据、电子商务、数据对比、物联网、智慧检测、设备状态、云数据看板、echarts图例，以及多套...
echarts 常用图表示例
Looking的博客
12-08 3617
条形图 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>第一个 ECharts 实例</title> <!-- 引入 echarts.js --> <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></scrip
echart示例总结（持续更新）
洛尧的博客
10-17 1404
echart示例
echarts常用实例
weixin_30505043的博客
04-16 896
1、柱状图： 1、需要动态加载的参数是x轴以及柱状图的数值，legendData和seriesData。demo使用是可以直接写死参数，在执行this.initChart()方法即可。具体代码可以参数以下code. <!--门禁卡开门统计--> <template> <div class="openCardCountEle" style=...
echarts入门图表可视化（基本介绍+示例代码）
weixin_45594172的博客
11-21 1546
echarts入门图表可视化（基本介绍+示例代码）
ECharts案例大全（最新版），含各种案例，实例。
您的博客
02-07 3万+
前言：2022年2月以前，ECharts官网除了提供官方案例外，还额外提供了一个ECharts案例资源丰富的强大社区MakeA Pie来展示各类的ECharts案例。这对于广大开发者，特别是前端页面仔们来说简直是个福音网站。然后，现在却因无人维护，该社区被停用了。 这一停用无疑给广大ECharts使用者们带来一阵阴影（ps：要是遇上复杂的ECharts图标需求，那不得每次都是重头画起。呜呜~~） 方法一：不过不要慌张，本着遇到问题就解决问题的干劲，社区动力大佬为大家重新整理了一份几乎和原MakeA...
echarts离线文档
04-28
Echarts离线文档除了展示Echarts的基础使用方法外，还提供了丰富的示例和案例说明，通过这些示例和案例可以更快速地熟悉Echarts的使用。 Echarts离线文档对于需要经常使用或在没有网络环境下使用Echarts的用户来说...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值