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', // 布局方式,默认为水平布局,可选为: