echart的使用
1.下载echart.js的文件
2. 准备一个有大小的DOM容器
3.初始化echart实例对象
var myChart=echarts.init(document.querySelector(".box"));
4.指定配置项和数据
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
将配置项设置给echarts实例
myChart.setOption(option);
配置项
更多的配置项信息进入echarts配置项详情
option = {
//图表的标题
title: {
text: '折线图堆叠123123'
},
//是否有提示
tooltip: {
//触发方式'axis' item
trigger: 'axis'
},
//图例
legend: {
data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
},
//图距离DOM边框的距离
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
//工具方法功能
toolbox: {
feature: {
saveAsImage: {}
}
},
//x轴
xAxis: {
//是类目 还是值
type: 'category',
//初始点是否靠轴
boundaryGap: false,
//数据
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
//y轴
yAxis: {
type: 'value'
},
//每个数据图例下的数据
series: [
{
//有了name属性,可以不要前面的图例
name: '邮件营销',
//类型 是线 柱 饼
type: 'line',
//总量代表在之前的基础上相加的数量,一般不需要
stack: '总量',
//这个一个图例的数据集
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '联盟广告',
type: 'line',
stack: '总量',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: '视频广告',
type: 'line',
stack: '总量',
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: '直接访问',
type: 'line',
stack: '总量',
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: '搜索引擎',
type: 'line',
stack: '总量',
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
};
less使用
vscode安装插件Easy LESS插件
每当写less文件时自动为你生成.css文件
.TTF字体的引用
在less文件
@font-face {
font-family: electronic;
src: url(../font/DS-DIGIT.TTF);
}