echart 完整例子

已于 2024-02-23 16:25:40 修改
阅读量158 收藏
点赞数 2
分类专栏： echart 文章标签： 前端 javascript 开发语言
于 2024-01-30 14:16:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/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 // 不显示网格线
    },
}
一个打工仔的笔记
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
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可以导入修改或者在线生成
echarts简单案例
m0_65912225的博客
06-30 608
【代码】echarts简单案例。
echart vue例子
热门推荐
jack_rose_me的博客
07-14 1万+
文档： https://echarts.apache.org/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts 1、条形 <template> <div> <!-- 包其他内容需要有个外div --> <div :class="className" :style="{height:height,width:width}" id="sortEChart"/>
echart 例子
风华绝代的博客
07-22 525
代码如下 ： var data=[{value:335, name:'直接访问'}, {value:310, name:'邮件营销'}, {value:234, name:'联盟广告'}, {value:135, name:'视频广告'}, {value:154...
echart使用例子
独自远行
05-20 1507
先看看工程目录，将百度的工程文件复制到自己的工程里面，这里不再赘述。  然后根据需要选取echart图表    示例地址 新建一个Servelet，jsp文件使用Ajax. package com.lv.controller; import java.io.IOException; import java.io.PrintWriter; import java.util.Lin
EChart例子
qq_43127471的博客
10-24 129
let data1= ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]; let data2=["1","2","3","4","5","6","7"]; option = { title: { text: 'ECharts 入门示例' }, tooltip: { trigger: 'axis', // 触发类型，默...
Echart的简单例子
weixin_30300523的博客
12-14 93
【转载自：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 学习笔记一：EChart在html中的使用方式。
【爱打盹的喵】的专栏
06-08 4256
做项目的时候有用到，现在做一些笔记来记录，以免长时间没使用便给忘记。本人前端新手，如果其中内容有误，还请多指教，感激不尽！ EChart 在HTML中有两种使用方式，一种是使用<script>标签引入,一种是使用CDN（内容分发网络）方法，还有一种是npm安装方法 一使用<script>标签引入 使用<script>标签引入前需要下载echarts.min.js 文件，并包含在项目中。如果没有echarts.min.js文件，可以通过以下链接，可以去定...
echart展示县的geojson地图例子
weixin_43082983的博客
12-24 3766
echart展示县的geojson地图 html页面代码： &lt;body&gt; &lt;div id="chart"&gt;&lt;/div&gt; &lt;script src="/static/js/jquery-2.1.1.js"&gt;&lt;/script&gt; &lt;script src="/static/js/echarts/echarts.min
echart 的一些覆盖例子
07-24
嗯，自己改的一些echart例子，为了存档自己用的。你买了也不亏啊
echart 实例
11-16
各个图标的实例
记录一次前端页面崩溃的产生及处理
最新发布
weixin_51123079的博客
05-30 394
记录一次前端页面崩溃的产生及处理
Vue3实战笔记（52）—Vue 3封装持仓分析饼图
山花的博客
05-30 311
接上文，封装持仓分析饼图。封装好几个组件，用于后续开发。把忧愁煮成茶，让它在心间慢慢沉淀，剩下的，便是清甜的回味。
【JS实战案例汇总——不定时更新版】
微木
05-30 206
练习JS的实用案例
web前端三大主流框架
低调做人，低调编码，神码都是浮云
05-30 866
Web前端三大主流框架介绍：Angular、React、Vue
python前端通过API接口调用与后端进行数据交互前端如何调用api接口通过关键词获取电商平台热销商品数据
2301_78159247的博客
05-23 751
请求参数：q=女装&start_price=0&end_price=0&page=1&cat=0&discount_only=&sort=&page_size=&seller_info=&nick=&ppath=&imgid=&filter=参数说明：q:搜索关键字。
echart有errorbar的组件吗，给出完整的html的例子
07-11
当然，下面是一个使用 ECharts 绘制 errorbar 组件的完整 HTML 示例： ```html <!DOCTYPE html> <title>Errorbar Chart Example <!-- 引入 ECharts --> ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值