ECharts是一个纯Javascript图表库,底层依赖于轻量级的Canvas类库ZRender,基于BSD开原协议,是一款非常优秀的可视化前端框架。
下载http:// http://echarts.baidu.com/download.html
引入 绘制一个基础图表创建一个Dom容器
1.创建实例
var echart = echarts.init(document.getElementById("container"));
2.设置option参数
var option = {
title: {
text: "vue成绩分析图"
},
legend: {
data: ["成绩"]
},
tooltip: {},
xAxis: {
data: ["一", "二", "三", "四"]
},
yAxis: {},
series: [{
type: "bar",
data: ["80", "90", "70", "100"],
name: '成绩'
}]
}
3.更新option
echart.setOption(option);
这样一个简单的图表就创建成功了,看一下效果:
echarts术语速查| title | 图表的标题 |
| legend | 图例,展现了不同系列的标记、颜色和名字 |
| tooltip | 提示框 |
| xAxis | 直角坐标系 grid 中的 y 轴 |
| yAxis | 直角坐标系 grid 中的 x轴 |
| dataZoom | 区域缩放,用来放大一部分的数据,以看清细节 |
| timeline | 多个 option 切换,展现不同时间段的数据 |
| series.itemStyle | 系列的图形样式,对不同类型的图表有不同的意义。 |
主题
echarts的主题分为默认,dark深色主题和light浅色主题
自定义主题
去官网-资源-主题构建工具配置,配置好以后下载
https://echarts.apache.org/zh/theme-builder.html
使用 echarts.init(dom, 'customed') 创建图表,第二个参数即为 *.js 文件中注册的主题名字。
var echart = echarts.init(document.getElementById("container"),'chalk');
color调色盘
调色盘颜色列表。如果系列没有设置颜色,则会依次循环从该列表中取颜色作为系列颜色。 默认为:
['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
特殊样式
lineStyle:{width:"10px",cap:"rouned"}
10像素,端点平滑
itemStyle:{borderRadius:[100,100,100,100],}
//圆角,左上,右上,右下,左下
渐变色
var mycolor1 = {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(17, 255, 164, 0.7)' // 0% 处的颜色
}, {
offset: .7, color: 'rgba(203, 249, 102, 0.0)' // 100% 处的颜色
}],
global: false // 缺省为 false
}
完整代码:
效果为:
堆叠图精华:
name: "java",
type:"bar",
data: [100, 120, 90, 118],
stack: true,
完整代码:
效果为:
富文本label:{
show:true,
position:"center",
formatter:"{big|{d}}{small|%}n{b}",//a 系列名称,c 数据值, d百分比
rich:{
big:{fontSize:"36px",fontWeight:900},
small:{fontSize:"12px",color:"#00aaff"},
}
}
完整代码:
效果:
map地图



