ECharts使⽤步骤（五部曲）
简介：
⼀个适应javascript实现的开源可视化库（js插件）。可以流畅的运⾏在PC端和移动端上，兼容当前⼤部分浏览器（ie8及以上），底层依赖⽮量图形库ZRender，提供直观、交互丰富、可⾼度⾃定义化的数据可视化图表。
使⽤步骤（五部曲）：
1、下载并引⼊echarts.js⽂件
2、准备⼀个具备⼤⼩（确定宽⾼）div容器⽤来装图表
3、初始化echarts实例对象 ： echarts.init(dom容器)
4、指定配置项和数据（option）
5、将配置项设置给echarts实例对象 ：myBarLfet.setOption(option);
图表结构介绍图：
<!-- 图表名 -->
<h2>柱状图-就业⾏业</h2>
<!-- 内容 -->
<div class="chart"></div>
<!-- 创建⼀个空标签，解决下⾯两个⼩直⾓ -->
<div class="panel-footer"></div>
</div>
// 初始化echarts实例对象
var myBarLfet = echarts.init(document.querySelector('.bar-left'));
// 指定配置项和数据
var option = {
color: ['#3398DB'],
// 图表提⽰框组件
tooltip: {
// 触发⽅式：axis坐标轴，可看配置项⼿册
trigger: 'axis',
axisPointer: {            // 坐标轴指⽰器，坐标轴触发有效
type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
}
},
textstyle// 图例组件
/
/ legend:{
//  data:[]
// },
// ⼯具箱组件：下载图表为图⽚
toolbox: {
feature: {
saveAsImage: {}
}
},
// ⽹格配置：控制图表的范围/⼤⼩
grid: {
left: '3%',
right: '4%',
bottom: '3%',
// containLabel：刻度显⽰
containLabel: true
},
// 横坐标
xAxis: [
{
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],      axisTick: {
alignWithLabel: true
}
}
],
// 纵坐标
yAxis: [
{
type: 'value'
}
],
// 系列图表配置
series: [
{
name: '直接访问',
type: 'bar',
barWidth: '60%',
data: [10, 52, 200, 334, 390, 330, 220]    }
]
};
// 将配置项给实例对象
myBarLfet.setOption(option);
坐标轴修改字体颜⾊：
axisLabel: {
color: '#4c9bfd' // ⽂本颜⾊
}
其他修改字体：
textStyle: {
color: ' #4c9bfd',
}
分割线设置：
splitLine:{
lineStyle: {
color: '#012f4a'
}
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。