Pink老师的Echart.js学习笔记

本文详细介绍了Echarts.js的加载方法,包括开启和隐藏loading效果,按需引入组件以减小体积。同时展示了如何配置折线图、提示信息、图表样式、图例等选项,以及使用技巧如保存图表为图片的功能。
摘要由CSDN通过智能技术生成
 
myChart.showLoading();  // 开启 loading 效果
myChart.hideLoading();  // 隐藏 loading 效果
 
// 按需引入,减少体积
let echarts = require("echarts/lib/echarts");
// 引入折线图组件
require("echarts/lib/chart/line");
require('echarts/lib/component/tooltip')
 
 
option={
    title: {
        text: '折线图堆叠' //标题
    },
    legend: { 
        data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'] //图例说明
    },
    tooltip: {
        trigger: 'axis'//提示信息标签
    },
    grid: {//网格设置
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true //显示出标签(预留出大小)
    },
    toolbox: {
        feature: {
            saveAsImage: {} //可以保存成图片
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,  //范围分界线(从x轴起点开始)
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
}
 
 
echartsInit(id) {
      // 按需引入,减少体积
      let echarts = require("echarts/lib/echarts");
      // 引入折线图组件
      require("echarts/lib/chart/line");
      require("echarts/lib/component/tooltip");
      // 基于准备好的dom,初始化echarts实例
      var myChart = echarts.init(document.getElementById(id));
      // 绘制图表
      myChart.setOption({
        xAxis: {
          type: "category",
          data: ["一月", "二月", "三月", "四月", "五月", "六月"],
          boundaryGap: false,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          type: "value",
          axisTick: {
            show: false
          }
        },
        series: [
          {
            data: [100, 250, 400, 500, 400, 300],
            type: "line",
            smooth: true,
            areaStyle: {}
          }
        ],
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        color: "#5591fc",
        tooltip: {
          trigger: "axis"
        }
      });
    }
 
 
 
 
 
页面布局:flexible.js
less &
(一个冒号,伪类不是伪元素)
加一个左上角和右上角的[
 
字体图标的使用:
小竖线做法:第一个li加一个after
球体旋转
 
Echarts.js使用:
option配置项:
 
立即执行函数防止作用域污染
(func...)();
修改option的一些参数:
让图表自适应屏幕:
 
柱状图2配置:
修改第一组内容:
设置第一组柱子不同颜色
第二组
 
折线图
折线图的一些设置:
饼图:
 
 
 
 
 
 

 
theme = {
    // 全图默认背景
    // backgroundColor: 'rgba(0,0,0,0)',
 
 
    // 默认色板
    color: ['#ff7f50','#87cefa','#da70d6','#32cd32','#6495ed',
            '#ff69b4','#ba55d3','#cd5c5c','#ffa500','#40e0d0',
            '#1e90ff','#ff6347','#7b68ee','#00fa9a','#ffd700',
            '#6699FF','#ff6666','#3cb371','#b8860b','#30e0e0'],
 
 
    // 图表标题
    title: {
        x: 'left',                 // 水平安放位置,默认为左对齐,可选为:
                                   // 'center' ¦ 'left' ¦ 'right'
                                   // ¦ {number}(x坐标,单位px)
        y: 'top',                  // 垂直安放位置,默认为全图顶端,可选为:
                                   // 'top' ¦ 'bottom' ¦ 'center'
                                   // ¦ {number}(y坐标,单位px)
        //textAlign: null          // 水平对齐方式,默认根据x设置自动调整
        backgroundColor: 'rgba(0,0,0,0)',
        borderColor: '#ccc',       // 标题边框颜色
        borderWidth: 0,            // 标题边框线宽,单位px,默认为0(无边框)
        padding: 5,                // 标题内边距,单位px,默认各方向内边距为5,
                                   // 接受数组分别设定上右下左边距,同css
        itemGap: 10,               // 主副标题纵向间隔,单位px,默认为10,
        textStyle: {
            fontSize: 18,
            fontWeight: 'bolder',
            color: '#333'          // 主标题文字颜色
        },
        subtextStyle: {
            color: '#aaa'          // 副标题文字颜色
        }
    },
 
 
    // 图例
    legend: {
        orient: 'horizontal',      // 布局方式,默认为水平布局,可选为:
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值