Pink老师的Echart.js学习笔记

 

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"

        }

      });

    }

 

 

 

黑马: https://www.bilibili.com/video/BV1v7411R7mp?p=5

 

 

页面布局: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' ¦