echart 完整例子

已于 2024-02-23 16:25:40 修改
阅读量267 收藏
点赞数 2
CC 4.0 BY-SA版权
分类专栏： echart 文章标签： 前端 javascript 开发语言
于 2024-01-30 14:16:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Web_Notes/article/details/135931982

1.完整例子

<!--集团用电数据柱状图-->
<template>
  <div class="scsj-wsd">
    <div class="type-btns">
      <div
        class="btns-item"
        :class="currType == 0 ? 'active' : ''"
        @click="change(0)"
      >年</div>
      <div
        class="btns-item"
        :class="currType == 1 ? 'active' : ''"
        @click="change(1)"
      >月</div>
    </div>
    <div
      v-if="!loaded"
      class="loading-div"
    >
      <dv-loading>Loading...</dv-loading>
    </div>
    <div
      id="kysj_ele"
      style="width:100%;height:160px"
    ></div>
  </div>
</template>
<script>
// import axios from 'axios'
// import echarts from 'echarts'
export default {
  data() {
    return {
      domSize: {
        height: 0
      },
      currType: 0, //
      datas: []
    };
  },
  created() {
    this.domSize.height = this.$parent.$el.clientHeight - 80;
  },
  computed: {
    loaded() {
      return this.datas.length;
    }
  },
  mounted() {
    let dom = document.getElementById('kysj_ele');
    this.currentChart = echarts.init(dom);
    const resizeObserver = new ResizeObserver((entries) => {
      this.domSize.height = this.$parent.$el.clientHeight - 50;
      this.currentChart.resize();
    });
    resizeObserver.observe(this.$parent.$el);
    //数据有了后更新表格

    this.getData().then((res) => {
      this.updateChart();
    });
    setInterval(() => {
      this.getData();
    }, 5 * 60 * 1000);

  },
  methods: {
    getData() {
      return this.dataChartLoad().then((res) => {
        this.datas = res.map((r) => r.data.data);
      });
    },
    //切换类型
    change(type) {
      if (this.currType == type) return;
      this.currType = type;
      this.updateChart();
      //重新开始时间循环
      this.timeChange();
    },
    _axios(url, params, type = 'get') {
      return axios.request({
        method: type, //请求方法，必须设置为get。其它可选方式为post或patch。
        url: url, //请求地址。必须设置为“https://codegeex.cn”。或完整的URL
        params,
        headers: {
          'Content-Type': 'application/json',
          token: '04b5e08325f14459b9f2dd7560c042ce'
        }
      });
    },
    //获取数据
    dataChartLoad() {
      let url = 'https://api.minexiot.com/mye/qynh/api/v2/screen/energy/groupByYOY';
      let p1 = this._axios(url, {
        energyType: '2'
      }); //请求的请求体。可以将其传递给服务器。如果没有数
      let p2 = this._axios(url, {
        energyType: '1'
      });
      let p3 = this._axios(url, {
        energyType: '3'
      });
      return Promise.all([p1, p2, p3]);
    },
    //初始化
    initChart() {
      this.updateChart();
    },
    //更新chart
    updateChart() {
      let option = null;
      if (this.currType == 1) {
        option = this.getOptionLine();
      } else {
        option = this.getOption();
      }

      this.currentChart.clear();
      this.currentChart.setOption(option);
    },
    //获取echarts配置
    getOption(data) {
      let type = this.currType;
      let option = {};

      let unit = [];
      let dataPrev = [];
      let dataCurr = [];
      let currData = this.datas[type];

      currData.forEach((item, index) => {
        let v1 = item.values.preYear ? item.values.preYear : '';
        let v2 = item.values.thisYear ? item.values.thisYear : '';
        dataPrev.push(v1);
        dataCurr.push(v2);
      });
      //假数据
      dataPrev = [75, 60, 63, 68, 87, 68, 90, 77, 56, 70, 85, 66];
      dataCurr = [60, 46, 40, 55, 70, 44, 85, 54, 45, 62, 60, 40];
      let lineData = [40, 50, 36, 50, 55, 61, 45, 59, 56, 49, 54,34];
      //假数据end
      option = {
        calculable: true,
        legend: {
          // 指示框名字  注意！要和下方series中的name一起改
          data: [
            { name: '出矿过磅量', icon: 'image://https://cdn.minexiot.com/bigscreen/datav-img/lengend_react_blue.png' },
            {
              name: '中转过磅量',
              icon: 'image://https://cdn.minexiot.com/bigscreen/datav-img/lengend_react_green.png'
            },
            { name: '库存量', icon: 'image://https://cdn.minexiot.com/bigscreen/datav-img/rect_yellow.png' }
          ],
          itemWidth: 12,
          textStyle: {
            color: '#ffffff', //字体颜色
            fontSize: 12
          },
          // 指示框位置  距离上下左右多少
          rigth: '0',
          left: '35%'
        },
        tooltip: {
          show: true,
          formatter: '{a} {b} : {c} ' + unit
        },
        xAxis: [
          {
            type: 'category',
            data: Array.from({ length: 12 }).map((a, index) => `${index + 1}月`),
            axisLine: {
              //x轴线的颜色以及宽度
              show: true, //是否显示X轴
              lineStyle: {
                color: '#fff'
              }
            },
            axisLabel: {
              // interval: 0,  //间隔几条显示
              // rotate: 20,  // 切斜度数
              fontSize: 12 //字体大小
            },
            axisTick: {
              //是否显示刻度线
              show: false
            }
          }
        ],
        yAxis: [
          {
            name: '吨',
            type: 'value',
            axisTick: {
              //y轴刻度线
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#f2eded',//纵坐标刻度文字颜色
              }
            },
            axisLabel: {
              formatter: '{value} ' + unit,
              fontSize: 12
            },
            splitLine: {
              //网格线
              show: true, //是否显示
              lineStyle: {
                //网格线样式
                color: 'rgba(192,192,192,0.2)', //网格线颜色
                width: 1, //网格线的加粗程度
                type: 'dashed' //网格线类型
              }
            }
          },

          {
            //第二种方式
            type: 'value',
            name: '%',
            min: 0,
            max: 100,
            position: 'right',
            axisLabel: {
              formatter: '{value}'
            },
            splitLine: {
              //网格线
              show: true, //是否显示
              lineStyle: {
                //网格线样式
                color: 'rgba(192,192,192,0.2)', //网格线颜色
                width: 1, //网格线的加粗程度
                type: 'dashed' //网格线类型
              }
            }
          }
        ],
        // 整体大小
        grid: {
          left: '0%',
          right: '0%',
          top: '23%',
          bottom: '30',
          containLabel: true,
          borderColor: 'transparent'
        },
        series: [
          {
            barWidth: 7, //柱子宽度
            name: '出矿过磅量',
            type: 'bar',
            data: dataPrev,
            itemStyle: {
              //颜色样式部分
              normal: {
                // barBorderRadius: [20, 20, 0, 0], //圆角[上左，上右，下右，下左]
                label: {
                  show: false, //开启数字显示
                  position: 'top', //在上方显示数字
                  textStyle: {
                    //数值样式
                    color: '#fff', //字体颜色
                    fontSize: 10 //字体大小
                  }
                },
                //   柱状图颜色渐变
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  { offset: 0, color: 'rgba(23, 88, 255,0.2)' },
                  { offset: 1, color: '#1859FF' }
                ])
              }
            }
          },
          {
            barWidth: 7, //柱子宽度
            name: '中转过磅量',
            type: 'bar',
            data: dataCurr,
            itemStyle: {
              //颜色样式部分
              normal: {
                // barBorderRadius: [20, 20, 0, 0], //圆角[上左，上右，下右，下左]
                label: {
                  show: false, //开启数字显示
                  position: 'top', //在上方显示数字
                  textStyle: {
                    //数值样式
                    color: '#fff', //字体颜色
                    fontSize: 10 //字体大小
                  }
                },
                //   柱状图颜色渐变
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  { offset: 0, color: 'rgba(96, 255, 140,0.2)' },
                  { offset: 1, color: '#31EDB5' }
                ])
              }
            }
          },
          {
            name: '库存量',
            type: 'line',
            data: lineData,
            symbolSize: 2, //设置圆点大小为10
            itemStyle: {
              color: '#FEFA00'
            },
            areaStyle: {
              normal: {
                //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: 'rgba(254, 250, 0,0.2)'
                  },

                  {
                    offset: 1,
                    color: '#FEFA00'
                  }
                ])
              }
            } //区域颜色渐变
          }
        ]
      };
      return option;
    },
    getOptionLine(data) {
      let type = this.currType;
      let option = {};

      let unit = [];
      let dataPrev = [];
      let dataCurr = [];
      let currData = this.datas[type];

      currData.forEach((item, index) => {
        let v1 = item.values.preYear ? item.values.preYear : '';
        let v2 = item.values.thisYear ? item.values.thisYear : '';
        dataPrev.push(v1);
        dataCurr.push(v2);
      });
            //假数据
            dataPrev = [75, 60, 63, 68, 87, 68, 90, 77, 56, 70, 85, 66];
      dataCurr = [60, 46, 40, 55, 70, 44, 85, 54, 45, 62, 60, 40];
      let lineData = [40, 50, 36, 50, 55, 61, 45, 59, 56, 49, 54,34];
      //假数据end
      option = {
        calculable: true,
        legend: {
          // 指示框名字  注意！要和下方series中的name一起改
          data: [
            { name: '出矿过磅量', icon: 'image://https://cdn.minexiot.com/bigscreen/datav-img/lengend_line_blue.png' },
            { name: '中转过磅量', icon: 'image://https://cdn.minexiot.com/bigscreen/datav-img/lengend_line_green.png' },
            { name: '库存量', icon: 'image://https://cdn.minexiot.com/bigscreen/datav-img/lengend_line_green2.png' }
          ],
          itemWidth: 16,
          textStyle: {
            color: '#ffffff', //字体颜色
            fontSize: 12
          },
          // 指示框位置  距离上下左右多少
          rigth: '0',
          left: '35%'
        },
        tooltip: {
          show: true,
          formatter: '{a} {b} : {c} ' + unit
        },
        xAxis: [
          {
            type: 'category',
            data:['1日','5日','10日','15日','20日','25日','30日',],
            // data: Array.from({ length: 31 }).map((a, index) => `${index + 1}`),
            axisLine: {
              //x轴线的颜色以及宽度
              show: true, //是否显示X轴
              lineStyle: {
                color: '#fff'
              }
            },
            axisLabel: {
              // interval: 0,  //间隔几条显示
              // rotate: 20,  // 切斜度数
              fontSize: 12 //字体大小
            },
            axisTick: {
              //是否显示刻度线
              show: false
            }
          }
        ],
        yAxis: [
          {
            name: '米',
            type: 'value',
            axisTick: {
              //y轴刻度线
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#f2eded',//纵坐标刻度文字颜色
              }
            },
            axisLabel: {
              formatter: '{value} ' + unit,
              fontSize: 12
            },
            splitLine: {
              //网格线
              show: true, //是否显示
              lineStyle: {
                //网格线样式
                color: 'rgba(192,192,192,0.2)', //网格线颜色
                width: 1, //网格线的加粗程度
                type: 'dashed' //网格线类型
              }
            }
          },

          {
            //第二种方式
            type: 'value',
            name: '%',
            min: 0,
            max: 100,
            position: 'right',
            axisLabel: {
              formatter: '{value}'
            },
            splitLine: {
              //网格线
              show: true, //是否显示
              lineStyle: {
                //网格线样式
                color: 'rgba(192,192,192,0.2)', //网格线颜色
                width: 1, //网格线的加粗程度
                type: 'dashed' //网格线类型
              }
            }
          }
        ],
        // 整体大小
        grid: {
          left: '0%',
          right: '0%',
          top: '23%',
          bottom: '30',
          containLabel: true,
          borderColor: 'transparent'
        },
        series: [
          {
            barWidth: 7, //柱子宽度
            name: '出矿过磅量',
            type: 'line',
            data: dataPrev,
            symbolSize: 2, //设置圆点大小为10
            itemStyle: {
              color: '#1859FF', // 数据颜色
              gradientColorNum: 1
            }
          },
          {
            barWidth: 7, //柱子宽度
            name: '中转过磅量',
            type: 'line',
            data: dataCurr,
            symbolSize: 2, //设置圆点大小为10
            itemStyle: {
              color: '#31EDB5', // 数据颜色
              gradientColorNum: 1
            }
          },
          {
            name: '库存量',
            type: 'line',
            data: lineData,
            symbolSize: 2, //设置圆点大小为10
            itemStyle: {
              color: '#FEFA00', // 数据颜色
              lineStyle: {
                width: 1, //设置线条粗细
                type: 'dotted'
              }
              //   normal:{
              //     lineStyle:{
              //         width:,
              //         type:'dotted'  //'dotted'点型虚线 'solid'实线 'dashed'线性虚线
              //     }
              // }
            }
          }
        ]
      };
      return option;
    }
  }
};
</script>
<style lang="less">
.scsj-wsd {
  width: 100%;
  height: 100%;
  position: relative;
}

.scsj-wsd .type-btns {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 0px;
  margin-bottom: 7px;
  .btns-item {
    width: 48px;
    height: 20px;
    background: rgba(0, 37, 37, 0.5);
    border-radius: 3px;
    border: 1px solid #1c8583;
    color: #1c8583;
    cursor: pointer;
    text-align: center;
    line-height: 18px;
    font-size: 12px;
  }
  .active {
    border: 1px solid #32f0ee !important;
    color: #32f0ee !important;
    height: 18px;
  }
}
</style>

效果图：
在这里插入图片描述
在这里插入图片描述
2.其他
①刻度线显示问题


xAxis: {
    show:false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
    axisTick:{
          show:false // 不显示坐标轴线
    },
    axisLine: {
          show: false, // 不显示坐标轴刻度线
    },
    axisLabel: {
          show: false, // 不显示坐标轴上的文字
    },
    splitLine:{
         show:false // 不显示网格线
    },
}
Echart 的实例
csdn_chenli
05-26 5654
这是我自己做的一些实例  有Echarts 部分属性的注释 学习网站：http://echarts.baidu.com/index.html ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库 ZRender，提供直
echart 实例
11-16
各个图标的实例
Echarts-柱状图实例
最新发布
qq_52423135的博客
06-21 250
*注意点： 柱状图二 柱状图三 柱状图四 代码如下（示例）：*注意点：方法一： 方法二：
Echart案例分享
webhhhhhh的博客
01-31 582
grid: {top: '0',left: '0',},yAxis: [{},},}],xAxis: [{},},}],series: [{label: {normal: {},normal: {offset: 0,color: '#061D46' // 0% 处的颜色}, {offset: 1,color: '#00D8FF' // 100% 处的颜色}, {label: {normal: {},normal: {}, {normal: {},
echarts完整实例
10-20
这是我实际项目中的一个echarts完整实例，将echarts数值通过json方式从后台数据库中读取。
【EChart】 图表实例
yan
09-04 224
【代码】【EChart】 图表实例。
C# MVC 封装百度的EChart完整例子
06-02
类EChartJson包含了绘制图形的几种基本要素，大家可以根据需要扩展EChart的更多图表属性，当然这个需要各位多了解百度EChart图表的各种属性描述。方法getJsonData()负责在后台为EChartJson的实例初始化数据，并返回...
echart2.0map例子.rar
12-19
echart2.0地图使用接送数据 1.如果地图不全 ，或者需要绘制新的图 2.可以按照json或者js里面的数据格式，添加新的geo坐标数据 3.geo生成比较多，推荐 http://geojson.io可以导入修改或者在线生成
django+echart数据动态显示的例子
01-21
目标：从plc采集数据到数据库，利用echart绘制实时动态曲线。 1 思路 – django定时执行任务，将数据推送到echart。 – 前端定时读取后端数据，并显示到echart上。 第一种思路貌似走不通，主要考虑第二种方式。 第二...
echart官方demo（完整版）
07-31
"echart官方demo（完整版）"是一个包含ECharts所有示例和必需JavaScript库的压缩包，非常适合前端开发者用于学习、参考和实际项目应用。 首先，ECharts的图表类型非常多样化，包括但不限于： 1. 折线图（line）：...
echart示例 ---大量
m0_37477061的博客
06-29 1637
http://echarts.baidu.com/echarts2/doc/example.html
echart案例之一
05-14
echart案例,给初学者提供方便的学习机会,简单易懂, 很快掌握!
echart实例echart实例
02-09
echart实例echart实例echart实例
Echarts实例
11-29
简单的Echars使用小demo,解压后，直接点html便可以看到效果
Echart实例
08-04
Echarts图表开发实例，包括折线图、饼状图、柱状图等
Echart使用范例
01-10
ECharts使用部分代码，仅提供参考功能，具体的使用方案参照官网
echart 例子
风华绝代的博客
07-22 582
代码如下 ： var data=[{value:335, name:'直接访问'}, {value:310, name:'邮件营销'}, {value:234, name:'联盟广告'}, {value:135, name:'视频广告'}, {value:154...
echarts 实例
qq_43343499的博客
10-29 2062
echarts 实例 官方文档地址:/echarts.apache.org 一个网页中可以创建多个 echarts 实例。每个 echarts 实例 中可以创建多个图表和坐标系等等（用 option 来描述）。准备一个 DOM 节点（作为 echarts 的渲染容器），就可以在上面创建一个 echarts 实例。每个 echarts 实例独占一个 DOM 节点。 系列（series） 系列（series）是很常见的名词。在 echarts 里，系列（series）是指：一组数值以及他们映射成的图。“系列”
Echart的简单例子
weixin_30300523的博客
12-14 129
【转载自：http://echarts.baidu.com/echarts2/doc/start.html】 <%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><!DOCTYPE html><head> 　　<meta char...
echart rich的例子
03-25
<think>好的，我现在需要帮助用户寻找关于ECharts中rich文本样式配置的示例。用户提到了引用1、2、3，这些引用都涉及ECharts的富文本标签（rich text）的使用方法、案例和功能。首先，我需要仔细分析用户提供的引用内容，看看里面有没有直接相关的示例或说明。 引用1提到可以在series-bar.label.normal.rich中定义文本片段样式。这说明在柱状图的标签配置中，可以使用rich属性来定制不同片段的样式。引用2提供了一个案例网址，里面可能有具体的示例，比如本年商场顾客男女人数统计的图表，可能用到了柱状图和折线图，并结合了rich文本。引用3则详细说明了富文本的功能，比如整体样式、个别片段样式、图片使用和组合效果，如表格和分割线。 接下来，我需要回忆ECharts官方文档中关于rich的配置项。通常，rich允许通过定义不同的样式块（如字体、颜色、背景、边框等），然后在文本中使用大括号包裹的名称来引用这些样式。例如，在文本中写`{a|这段文字样式为a}`，并在rich中定义a的样式。 用户需要的是具体的示例，所以应该提供几个典型的应用场景，比如不同颜色的文字、带背景的标签、图标与文本结合等。同时，用户提供的引用2中的案例网站可能有现成的代码示例，需要引导用户去查看。 此外，要注意引用对应的来源，确保回答中的引用标识正确。例如，引用1和引用3都提到了富文本的整体和片段样式，而引用2提供了实际案例的链接。需要将这些信息整合到回答中，并自然地添加引用标识。 可能还需要考虑用户的实际应用场景，比如他们可能想在柱状图的标签中添加不同样式的文本，或者在提示框中使用富文本格式。因此，给出不同组件的示例（如series-bar的label，tooltip等）会更有帮助。 最后，确保回答结构清晰，分点说明，并生成相关问题，帮助用户进一步探索。例如，如何调整富文本的边框，或者如何实现更复杂的布局。</think>关于ECharts中`rich`富文本样式的配置示例，以下是具体实现方法和典型应用场景的说明： ### 一、基础文本片段样式控制 在柱状图标签中实现多颜色文字组合： ```javascript label: { show: true, formatter: '{a|红色文字} {b|蓝色文字}', rich: { a: { color: '#ff0000', fontSize: 16 }, b: { color: '#0000ff', fontWeight: 'bold' } } } ``` 此配置通过`formatter`中的`{a|...}`占位符对应`rich`定义的样式块，实现同一标签内不同颜色和字重的文本组合[^3]。 ### 二、复杂标签布局实现 创建带背景框和分割线的复合标签： ```javascript rich: { total: { backgroundColor: '#999', color: '#fff', padding: [5, 10], borderRadius: 5 }, line: { height: 10, borderColor: '#aaa', borderWidth: 1, width: '100%' } } ``` 通过定义`line`样式块可实现水平分隔线，`total`样式块创建圆角背景容器。 ### 三、图表元素与文本混排 在饼图标签中嵌入图标： ```javascript formatter: '{icon|◼} 销售额: {value|￥12500}', rich: { icon: { height: 16, width: 16, color: '#4F81BD' }, value: { color: '#c23531', padding: [0, 5] } } ``` 通过定义`icon`样式块调整图标尺寸和颜色，实现图形符号与数值的并排显示[^2]。 ### 四、响应式布局配置 在tooltip中实现自适应布局： ```javascript tooltip: { formatter: '{a|商品类别}: {b|家电}\n{hr|}\n{c|销售额} ￥4500', rich: { hr: { borderWidth: 1, width: '100%' }, c: { align: 'right' } } } ``` `hr`样式块创建水平分隔线，`c`样式块实现右对齐文本[^1]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值