Echarts笔记
文章目录
- 微信小程序引入Echats
- 下载官方Echats插件
- 小程序导入
- 动态加载
- JSP引入Echats
- 导入
- 绘制一个简单的图表
- 折线图属性介绍
- 仪表图属性介绍
微信小程序引入Echats
下载官方Echats插件
为了兼容小程序 Canvas，我们提供了一个小程序的组件，用这种方式可以方便地使用 ECharts。
首先，下载 GitHub 上的 ecomfe/echarts-for-weixin 项目。
其中，ec-canvas 是我们提供的组件，其他文件是如何使用该组件的示例。
ec-canvas 目录下有一个 echarts.js，默认我们会在每次 echarts-for-weixin 项目发版的时候替换成最新版的 ECharts。如有必要，可以自行从 ECharts 项目中下载最新发布版，或者从官网自定义构建以减小文件大小。
小程序导入
在 pages/index目录下新建index页面 并且在 app.json 的 pages 中增加 ‘pages/index’。
index.json 配置如下：
{
“usingComponents”: {
“ec-canvas”: “…/…/ec-canvas/ec-canvas”
}
}
这一配置的作用是，允许我们在 pages/bar/index.wxml 中使用 < ec-canvas> 组件。注意路径的相对位置要写对，如果目录结构和本例相同，就应该像上面这样配置。
index.wxml 中，我们创建了一个 < ec-canvas> 组件，内容如下：
import * as echarts from '../../../utils/ec-canvas/echarts'; //引入echarts.js
<view class="container">
<ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
</view>
其中 ec 是一个我们在 index.js 中定义的对象，它使得图表能够在页面加载后被初始化并设置。index.js 的结构如下：
function initChart(canvas, width, height) {
const chart = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(chart);
var option = {
...
};
chart.setOption(option);
return chart;
}
Page({
data: {
ec: {
onInit: initChart
}
}
});
修改上面 option 的内容，即可改变图表
动态加载
import * as echarts from '../../../utils/ec-canvas/echarts'; //引入echarts.js
var dataList = [];
Page({
/**
* 页面的初始数据
*/
data: {
ec: {
lazyLoad: true // 延迟加载
},
}
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.echartsComponnet = this.selectComponent('#mychart');
this.getData(); //获取数据
},
getData: function () {
/**
* 此处的操作：
* 获取数据json
*/
wx.request({
url: url, //仅为示例，并非真实的接口地址
data: data,
method: 'POST',
header: { 'content-type': 'application/x-www-form-urlencoded' },
success: (res) => {
dataList = res.data;
this.init_echarts();//初始化图表
}
});
},
//初始化图表
init_echarts: function () {
this.echartsComponnet.init((canvas, width, height) => {
// 初始化图表
const Chart = echarts.init(canvas, null, {
width: width,
height: height
});
Chart.setOption(this.getOption());
// 注意这里一定要返回 chart 实例，否则会影响事件处理等
return Chart;
});
},
getOption: function () {
//时间显示范围
var anchor = [
{ name: weekDate, value: [weekDate, 0] }, // 开始
{ name: nowDate, value: [nowDate, 0] } // 结束
];
// 指定图表的配置项和数据
var option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: dataList,
type: 'line'
}]
}
return option;
},
})
JSP引入Echats
导入
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="echarts.min.js"></script>
</head>
</html>
绘制一个简单的图表
在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
</body>
然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图
<!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>
折线图属性介绍
var option = {
backgroundColor: '#FFF0F5',
title: {
text: '折线图',
subtext: '模拟数据',
x: 'center'
},
legend: {
// orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
orient: 'horizontal',
// x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
x: 'left',
// y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
y: 'top',
//不同折线名，与series属性中各元素的name要对应
data: ['预期','实际','假设']
},
// 图表距边框的距离,可选值：'百分比'¦ {number}（单位px）
grid: {
top: '16%', // 等价于 y: '16%'
left: '3%',
right: '8%',
bottom: '3%',
containLabel: true
},
// 提示框
tooltip: {
//坐标轴触发
trigger: 'axis'
},
//工具框，可以选择
toolbox: {
feature: {
saveAsImage: {} //下载保存工具
}
},
xAxis: {
name: '周几',
type: 'category',
axisLine: {
lineStyle: {
// 设置x轴颜色
color: '#912CEE'
}
},
// 设置X轴数据旋转倾斜
axisLabel: {
rotate: 30, // 旋转角度
interval: 0 //设置X轴数据间隔几个显示一个，为0表示都显示
},
// boundaryGap值为false的时候，折线第一个点在y轴上
//设置不从0开始则改成true
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
name: '数值',
type: 'value',
min:0, // 设置y轴刻度的最小值
max:1800, // 设置y轴刻度的最大值
splitNumber:9, // 设置y轴刻度间隔个数
axisLine: {
lineStyle: {
// 设置y轴颜色
color: '#87CEFA'
},
//y轴显示单位
axisLabel: {
formatter:'{value}(V)'
},
},
series: [
{
name: '预期',
//stack折线图叠加：第二条线的数值=本身的数值+第一条线的数值，
//第三条的数值=第二条线图上的数值+本身的数值，以此类推.....
stack:'数据'
data: [820, 932, 301, 1434, 1290, 1330, 1320],
type: 'line',
// 设置小圆点消失
// 注意：设置symbol: 'none'以后，拐点不存在了，设置拐点上显示数值无效
symbol: 'none',
symbolSize:1, //设置拐点大小
// 设置折线弧度，取值：0-1之间
smooth: 0.5,
},
{
name: '实际',
data: [620, 732, 941, 834, 1690, 1030, 920],
type: 'line',
// 设置折线上圆点大小
symbolSize:8,
itemStyle:{
normal:{
// 拐点上显示数值
label : {
show: true
},
borderColor:'red', // 拐点边框颜色
lineStyle:{
width:5, // 设置线宽
type:'dotted' //'dotted'虚线 'solid'实线
}
}
}
},
{
name: '假设',
data: [120, 232, 541, 134, 290, 130, 120],
type: 'line',
// 设置折线上圆点大小
symbolSize:10,
// 设置拐点为实心圆
symbol:'circle',
markPoint: {
data: [{
type: 'max',
name: '最大值'
},
{
type: 'min',
name: '最小值'
}]
},
markLine: {
data: [{
type: 'average',
name: '平均值'
}]
},
itemStyle: {
normal: {
// 拐点上显示数值
label : {
show: true
},
lineStyle:{
// 使用rgba设置折线透明度为0，可以视觉上隐藏折线
color: 'rgba(0,0,0,0)'
}
}
}
}
],
//设置三条折线颜色
color: ['#00EE00', '#FF9F7F','#FFD700']
};
仪表图属性介绍
var option = {
//提示框
tooltip : {
/*格式化弹框：
a:series的name属性
b:series的data的name属性
c:series的data的value属性
*/
formatter: "{a}
{b} : {c}"
},
grid: {
left: '3%',
right: '5%',
top: '0%',
bottom: '0%',
containLabel: true
},
series: [
{
name: '电压',
type: 'gauge',
center: ['20%', '55%'], // 默认全局居中
radius: '35%',
min: 300, //最大最小值，取整(低压-50)和(高压+50) 四舍五入
max: 450,
startAngle:180,
endAngle:0,
//分割段，最小值和最大值之间数整除分割
splitNumber:7,
radius: '100%',
//表图下的显示，这个是格式化显示数据附上单位
detail: {
formatter:'电压：{value}V',
textStyle: {
fontSize: 14
},},
//value显示数据，name表盘显示文字
data: [{value: 0,name: 'V'}],
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式 外圆宽度
width: 5,
color: [
//区分刻度范围的颜色
[0.356, '#87CEFF'], //(低压-min)/(max-min)
[0.71, '#71C671'], //(高压-min)/(max-min)
[1, '#FF4500']
]
},
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
fontSize: 20
},
},
axisTick: { // 坐标轴小标记
length: 7, // 属性length控制线长
lineStyle: { // 属性lineStyle控制线条样式
color: 'auto'
}
},
splitLine: { // 分隔线
length: 9, // 属性length控制线长
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
color: 'auto'
}
},
pointer: {//指针大小
width: 2,
},
title: {
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
fontWeight: 'bolder',
fontSize: 12,
fontStyle: 'italic'
}
},
}
]
};
```