echarts的使用总结
最近的项目是关于统计类型的应用，所以用到的图表库，比较多。通过此项目又比较懂得了echart和highechart的使用。为什么会使用两个呢？因为单独一个的话，不能够完全满足需求，所以两个都使用了。二者的优缺点都是次要的，我们的目的是可以满足我们的需求。我感觉这两个已经方便了很多，给我们做项目已经带来了很多便利。在此感谢服务商！！！
区别：
1.echarts是利用canvas来绘制的，svg以及和各种标签来绘制的。
2.自我感觉highcharts比较强大点，嘿嘿。
首先介绍Echarts图表库：官网地址：https://echarts.apache.org/zh/index.html
ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。
1.在页面上创建区域：<div id="main1" style="max-width:600px: 600px;height:400px;"></div>
2.引入js: <script src="../js/echarts.js" type="text/javascript" charset="utf-8"></script>
3.开始写js代码：
找到标签：var myChart1 = echarts.init(document.getElementById('main1'));
定义属性对象：var option1 = {}
绘制：myChart1.setOption(option1);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title> <!-- 引入 echarts.js -->
<script src="echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
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);
</script>
</body>
</html>
更多例子：https://gallery.echartsjs.com/explore.html#sort=rank~timeframe=all~author=all
主要的部分在 option中：
backgroundColor:'yellow', 背景颜色
color: ['red', 'yellow'], 颜色数组
animation：动画，
title 标题（详见title），每个图表最多仅有一个标题控件
timeline 时间轴（详见timeline），每个图表最多仅有一个时间轴控件
toolbox 工具箱（详见toolbox），每个图表最多仅有一个工具箱
tooltip 提示框（详见tooltip），鼠标悬浮交互时的信息提示
legend 图例（详见legend），每个图表最多仅有一个图例，混搭图表共享
dataRange 值域选择（详见dataRange）,值域范围
dataZoom 数据区域缩放（详见dataZoom）,数据展现范围选择
grid 直角坐标系内绘图网格（详见grid）
xAxis 直角坐标系中横轴数组（详见xAxis），数组中每一项代表一条横轴坐标轴
yAxis 直角坐标系中纵轴数组（详见yAxis），数组中每一项代表一条纵轴坐标轴
series 驱动图表生成的数据内容（详见series），数组中每一项代表一个系列的特殊选项及数据
title属性：
tooltip: {
show: true,
showContent: true,
trigger: 'item',
formatter: '{a}{b} : {c}',
showDelay: 10,
backgroundColor: 'rgba(0,0,0,0.6)',
borderColor: '#f32',
borderRadius: 30,
borderWidth: 12,
padding: 20,
textStyle: {
color: '#f42'
}
},
legend属性：
legend: {
orient: 'horizontal', //布局方式
x: 'right', //水平安放位置
y: 'top', //垂直安放位置
backgroundColor: 'rgba(0, 0, 0, 0.1)',
textStyle: {
color: '#f42'
},
selectedMode: true,
data: ['销量', '销量1']
}
dataRange：
grid：直角坐标系内绘图网格
x: 100,
y: 100,
x2: 100,
y2: 100,
backgroundColor: 'rgba(255,255,243,0.4)',
borderColor: 'blue',
borderWidth: 10
axis:
坐标轴有两种类型，类目型和数值型，他们的区别在于：
- 类目型：需要指定类目列表，坐标轴内有且仅有这些指定类目坐标
- 数值型：需要指定数值区间，坐标轴内包含数值区间内容全部坐标
xAxis: {
type: 'category', //坐标轴类型，横轴默认为类目型'category'，纵轴默认为数值型'value'
position: 'bottom',
name: '坐标轴名称', //坐标轴名称，默认为空
nameLocation: 'start', //坐标轴名称位置
nameTextStyle: {}, //坐标轴名称文字样式
boundaryGap: true, //类目起始和结束两端空白策略
axisLine: { //坐标轴线
show: true
},
axisTick: { //坐标轴小标记
show: true
},
axisLabel: { //坐标轴文本标签
show: true
},
splitLine: { //分隔线
show: true
},
splitArea: { //分隔区域
show: false
},
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
}
axis.axisLine:坐标轴线
show true 通用 是否显示，默认为true，设为false后下面都没意义了
onZero true 通用 定位到垂直方向的0值坐标上
lineStyle {color: '#48b', width: 2, type: 'solid'}
axis.axisTick:坐标轴小标记:
show false 通用 是否显示，默认为false
inside false 通用 小标记是否显示为在grid内部，默认在外部
lineStyle {color: '#333', width: 1} 通用 属性lineStyle控制线条样式，（详见lineStyle）
axis.axisLabel:坐标轴文本标签选项
show true 通用 是否显示，默认为true
rotate 0 通用 标签旋转角度，默认为0，不旋转，正值为逆时针，负值为顺时针
margin 8 通用 坐标轴文本标签与坐标轴的间距，默认为8，单位px
clickable false 通用 坐标轴文本标签是否可点击
formatter null 通用 间隔名称格式器：{string}（Template） | {Function}
textStyle {color: '#333'} 通用 文本样式（详见textStyle）
axis.splitLine:分隔线
lineStyle {color: ['#ccc'], width: 1, type: 'solid'}
axis.splitArea:分隔区域
areaStyle {color: ['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']}
series（通用）-------------------------------
例如：
series: [{
name: '销量',
type: 'bar',
data: [51, 20, 16, 101, 103, 203]
}, {
name: '销量1',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
驱动 图表 生成的数据 内容 数组，数组中 每一项为一个系列 的选项及数据，其中个别选项仅在部分图表类型中有效，请注意适用类型：
name 通用 系列名称，如启用legend，该值将被legend.data索引相关
tooltip 通用 提示框样式，仅对本系列有效，如不设则用option.tooltip,鼠标悬浮交互时的信息提示
type 通用 图表类型，必要参数！如为空或不支持类型，则该系列数据不被显示。
'line'（折线图） | 'bar'（柱状图） | 'scatter'（散点图） | 'k'（K线图）
'pie'（饼图） | 'radar'（雷达图） | 'chord'（和弦图） | 'force'（力导向布局图） | 'map'（地图）
itemStyle 通用 图形样式
markPoint {} 通用 标注（详见series.markPoint）
{Array} markLine {} 通用 标线（详见series.markLine）
浙公网安备 33010602011771号