最近有个朋友问了这样一个关于ECharts图表组件的问题，他想在一个页面内创建多个图表，不知道该如何做。最大的问题可能是受到了require([],function(){});的阻碍吧。
其实require无非就是一个模块化加载借用其回调函数去创建图表对象。
所以只要我们能够将创建多个图表对象的方法进行统一封装形成一个方法放入require()的回调函数内即可。
一个页面内创建多个ECharts图表示例效果图呈现
想要在一个页面创建多个图表对象需要准备如下几个条件，也可以说是注意事项：
1、想要创建几个图表对象就需要预先设置多少个图表容器
图表容器作为图表的载体，所以是必须的，且必须指定每一个容器的width和height为非零，否则会产生图表无法呈现的结果。
<div id="main" style="height: 400px; width: 500px; float: left; border: 1px solid #ccc;
padding: 10px;">
</div>
<div id="mainLine" style="height: 400px; width: 500px; float: left; border: 1px solid #ccc;
padding: 10px;">
</div>
这里准备了两个容器。
2、引入相关的js文件
<script src="js/esljs" charset="utf-8" type="text/javascript"></script>
<script src="js/echartsjs" charset="utf-8" type="text/javascript"></script>
3、编写好创建不同图表对象的方法
1）、创建一个柱状图的函数
//创建ECharts柱状图图表
function DrawColumnEChart(ec) {
//--- 柱状图 ---
var myChart = ecinit(documentgetElementById('main'));
//图表显示提示信息
myChartshowLoading({
text: "图表数据正在努力加载"
});
myCharthideLoading();
myChartsetOption({
title: {
text: "柱状图"
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['stepdaycom', 'tuiwosacom']
},
toolbox: {
show: false
},
calculable: true,
xAxis: [
{
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
}
],
yAxis: [
{
type: 'value',
splitArea: { show: true }
}
],
series: [
{
name: 'stepdaycom',
type: 'bar', //序列展现类型为柱状图
data: [20, 49, 70, 232, 256, 767, 1356, 1622, 326, 200, 64, 33]
},
{
name: 'tuiwosacom',
type: 'bar',
data: [26, 59, 90, 264, 287, 707, 1756, 1822, 487, 188, 60, 23]
}
]
});
var ecConfig = require('echarts/config');
//ECharts图表的click事件监听
myCharton("click", function () {
alert("你点击我了!");
});
}
2）、创建折线图的函数
//创建ECharts折线图图表
function DrawLineEChart(ec) {
//--- 折线图 ---
var myLineChart = ecinit(documentgetElementById('mainLine'));
//图表显示提示信息
myLineChartshowLoading({
text: "图表数据正在努力加载"
});
myLineCharthideLoading();
myLineChartsetOption({
title: {
text: "折线图"
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['stepdaycom', 'tuiwosacom']
},
toolbox: {
show: false
},
calculable: true,
xAxis: [
{
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
}
],
yAxis: [
{
type: 'value',
splitArea: { show: true }
}
],
series: [
{
name: 'stepdaycom',
type: 'line', //序列展现类型为折线图
data: [20, 49, 70, 232, 256, 767, 1356, 1622, 326, 200, 64, 33]
},
{
name: 'tuiwosacom',
type: 'line',
data: [26, 59, 90, 264, 287, 707, 1756, 1822, 487, 188, 60, 23]
}
]
});
var ecConfig = require('echarts/config');
//ECharts图表的click事件监听
myLineCharton("click", function () {
alert("你点击我了!");
});
}
4、封装一个统一调用创建不同图表的函数
///将画多个图表的进行函数封装
function DrawCharts(ec) {
DrawColumnEChart(ec);
DrawLineEChart(ec);
}
5、结合模块加载函数require(requireArr,callbackFunction)创建图表对象
require(
[
'echarts',
'echarts/chart/bar', //按需加载图表关于bar图的部分
'echarts/chart/line' //按需加载图表关于线性图的部分
],
DrawCharts
);
6、特别提醒
1）、创建不同图表对象的时候需要注意方法内部关于init()初始化图表方法的时候其id要与需要状态当前图表容器id保持一致。
7、完整示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<title>ECharts-基本线性图</title>
<script src="js/esljs" charset="utf-8" type="text/javascript"></script>
<script src="js/echartsjs" charset="utf-8" type="text/javascript"></script>
</head>
<body>
<div id="main" style="height: 400px; width: 500px; float: left; border: 1px solid #ccc;
padding: 10px;">
</div>
<div id="mainLine" style="height: 400px; width: 500px; float: left; border: 1px solid #ccc;
padding: 10px;">
</div>
<div style="clear: both;">
<h3>
STEP DAY</h3>
<p>
我们只提供最直接、最具价值的信息，旨在：<a href="" target="_blank"></a>
</p>
</div>
<script type="text/javascript" language="javascript">
// Step:4 require echarts and use it in the callback
// Step:4 动态加载echarts然后在回调函数中开始使用，注意保持按需加载结构定义图表路径
require(
[
'echarts',
'echarts/chart/bar', //按需加载图表关于bar图的部分
'echarts/chart/line' //按需加载图表关于线性图的部分
],
DrawCharts
);
///将画多个图表的进行函数封装
function DrawCharts(ec) {
DrawColumnEChart(ec);
DrawLineEChart(ec);
}
//创建ECharts柱状图图表
function DrawColumnEChart(ec) {
//--- 柱状图 ---
var myChart = ecinit(documentgetElementById('main'));
//图表显示提示信息
myChartshowLoading({
text: "图表数据正在努力加载"
});
myCharthideLoading();
myChartsetOption({
title: {
text: "柱状图"
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['stepdaycom', 'tuiwosacom']
},
toolbox: {
show: false
},
calculable: true,
xAxis: [
{
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
}
],
yAxis: [
{
type: 'value',
splitArea: { show: true }
}
],
series: [
{
name: 'stepdaycom',
type: 'bar', //序列展现类型为柱状图
data: [20, 49, 70, 232, 256, 767, 1356, 1622, 326, 200, 64, 33]
},
{
name: 'tuiwosacom',
type: 'bar',
data: [26, 59, 90, 264, 287, 707, 1756, 1822, 487, 188, 60, 23]
}
]
});
var ecConfig = require('echarts/config');
//ECharts图表的click事件监听
myCharton("click", function () {
alert("你点击我了!");
});
}
//创建ECharts折线图图表
function DrawLineEChart(ec) {
//--- 折线图 ---
var myLineChart = ecinit(documentgetElementById('mainLine'));
//图表显示提示信息
myLineChartshowLoading({
text: "图表数据正在努力加载"
});
myLineCharthideLoading();
myLineChartsetOption({
title: {
text: "折线图"
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['stepdaycom', 'tuiwosacom']
},
toolbox: {
show: false
},
calculable: true,
xAxis: [
{
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
}
],
yAxis: [
{
type: 'value',
splitArea: { show: true }
}
],
series: [
{
name: 'stepdaycom',
type: 'line', //序列展现类型为折线图
data: [20, 49, 70, 232, 256, 767, 1356, 1622, 326, 200, 64, 33]
},
{
name: 'tuiwosacom',
type: 'line',
data: [26, 59, 90, 264, 287, 707, 1756, 1822, 487, 188, 60, 23]
}
]
});
var ecConfig = require('echarts/config');
//ECharts图表的click事件监听
myLineCharton("click", function () {
alert("你点击我了!");
});
}
</script>
</body>
</html>
转载
望采纳！
当我们新建一个扩展名为html的文件，按照echarts的demo复制如下代码：
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="height:400px"></div>
<!-- ECharts单文件引入 -->
<script src=">
你逗我 全都是自己设定的变量 你连这段代码是echart哪里的都不说清？
我只能告诉你 方法内第二句和第三句是初始化用的
下面这段是官方文档里的配置例子
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echartsjs -->
<script src="echartsminjs"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echartsinit(documentgetElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChartsetOption(option);
</script>
</body>
</html>
建议：既然要用人家的api那么最好好好研究下人家的官方文档及配置信息
>
（1） title: 标题组件，包含主标题和副标题。
--- text (string)：主标题文本，支持使用 \n 换行。
--- x (string)：在x轴位置。
--- textStyle (object)：主标题文字的颜色。
（2） tooltip: 提示框组件。
--- trigger (string)：触发类型。(默认: 'item' ）
|--- item：数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
|--- axis：坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
|--- none：什么都不触发。
（3） xAxis: 直角坐标系 grid 中的 x 轴，一般情况下单个 grid 组件最多只能放上下两个 x 轴，多于两个 x 轴需要通过配置 offset 属性防止同个位置多个 x 轴的重叠。
（4） yAxis: 直角坐标系 grid 中的 y 轴，一般情况下单个 grid 组件最多只能放左右两个 y 轴，多于两个 y 轴需要通过配置 offset 属性防止同个位置多个 Y 轴的重叠。
（5） series : 系列列表。每个系列通过 type 决定自己的图表类型。
更多折线图实例信息请参考ECharts： > var option={ timeline:{ data:['2013-01-01','2014-01-01','2015-01-01'], label : { formatter : function(s) { return sslice(0, 4); } }, autoPlay : true, playInterval : 1000 }, options:[ { /options 1 / title : {text: '2013'}, 做金融类型的应用经常会用到数据的统计报表 诸如折线图 , K线图, 饼状图,柱状图 既能形象的表述数据的分布 , 同时又增加了数据的可读性 实现思路: 百度Echarts支持安卓移动端的运用 , WebView加载html, 嵌套JavaScript代码 , 即可动态实现在线图表的展示功能 下面展示下今天要实现的效果 进入Echarts官网下载页 可以选择自己需要的图表类型 自定义下载js文件 , 精简版,常用版, 完整版 根据需求自定义下载 导入刚下载的图表构建工具 echartsminjs 到安卓项目的 资产目录(assets)下 这里我使用的 完整版 创建 Htm l文件 , 即要展示的网页 , 文件名自定义 这里我是 myecharthtml 我的assets目录结构如下: 接下来就是html文件的代码了 首先我们为ECharts准备一个具备大小(宽高) 的 DOM 并取别名
导入图表构建工具
<script src="js/echartsminjs"></script>因为我这里要展示多种类型的图表 所以定义了几个方法 下面以折线图为例
var lineJson;//用于临时存储折线图json对象, 便于追加数据
//创建折线图
function createLineChart(obj){
lineJson=obj;
options = {
title : {
//text: '脉搏值(次/min)',
text: objtitle,
subtext: 'make by sxt',
x:'left'
},
tooltip: {
trigger: 'axis',
formatter: "脉搏频率 : <br/>{b} - {c} 次/min"
},
xAxis: {
id: 'dataX',
type: 'category',
splitLine:{
show:true
},
axisLabel: {
//formatter: '{value} °C'
formatter: '{value}'
},
data: objtimes //动态展示运动时间
},
yAxis: {
type: 'value',
axisLine: {onZero: true},
splitLine:{
show:true
},
axisLabel: {
//formatter: '{value} km'
formatter: '{value}'
},
min:0,
max:150//在此设置范围
},
dataZoom: [
{
id:'dataZoom',
show:false,
type: 'inside',//inside 为拖动效果
//type: 'slider',//slider为手动更新效果
realtime: true,
filterMode: 'filter',
start: 20,
end: 85,
xAxisIndex: 0
}
],
series: [{
id: 'dataY',
name: '脉搏频率(次)/(s)',
type: 'line',
smooth: true,
data: objsteps, //动态展示运动步数数据
lineStyle: {
normal: {
width: 3,
shadowColor: 'rgba(0,0,0,04)',
shadowBlur: 10,
shadowOffsetY: 10
}
},
markPoint : {//标注点
data : [//这种方式内部自动计算最值
{
type :'max' ,
name:'最大值' ,
symbol:'image://' + treeUrl,
symbolSize: [30, 30]
},
{
type : 'min',
name: '最小值',
symbol:'image://' + childUrl,
symbolSize: [30, 30]
}
]
},
markLine : {
data : [ {type : 'average', name: '平均值'} ]
}
}]
};
}
//更新折线图的缩放起始位置
function updateZoomState(start,end){
myChartsetOption({
dataZoom: [{
id: 'dataZoom',
start: start,
end: end
}]
});
}
//获取数组最小值
function getMinValue(obj){
var min = objsteps[0];
for (var i = 1; i < objstepslength; i++){
if (objsteps[i] < min){
min = objsteps[i];
}
}
return min;
}
//获取数组最大值
function getMaxValue(obj){
var max = objsteps[0];
for (var i = 1; i < objstepslength; i++){
if (objsteps[i] > max) {
max = objsteps[i];
}
}
return max;
}
//更新折线图数据 继续在后面追加数据
function updateDataXY(dataX,dataY){
myChartsetOption({
xAxis: {
id: 'dataX',
data:lineJsontimesconcat(dataX)
},
series:[{
id: 'dataY',
data:lineJsonstepsconcat(dataY)
}],
dataZoom: [{
id: 'dataZoom',
start: 60,
end: 100
}]
});
}
展示图表
//显示图表
function createChart(type,json){
if(type=='line'){
createLineChart(json);
}
if(type=='bar'){
createBarChart(json);
}
if(type=='pie'){
createPieChart(json);
}
if(type=='more'){
createMoreChart()
}
// 基于准备好的dom，初始化echarts实例
myChart = echartsinit(documentgetElementById('main'));
//使用指定的配置项和数据显示图表。
myChartsetOption(options);
}
封装echars组件：
首先安装echarts npm echarts --save
然后新建一个echarts文件夹，新建indexvue文件：
```
<template>
<div class="echartStyle" ref="echarts"></div>
</template>
<script lang="ts">
let Echarts = require('echarts/lib/echarts')
// 按需引入需要的组件模块
require('echarts/lib/chart/line')
require('echarts/lib/chart/scatter')
require('echarts/lib/component/title')
require('echarts/lib/component/legend')
require('echarts/lib/component/tooltip')
require('echarts/lib/component/toolbox')
require('echarts/lib/component/dataZoom')
import { defineComponent } from 'vue'
export default defineComponent({
name: 'vue-echarts',
props: {
option: {//配置项
type: Object,
required: true
},
data: {//数据
type: Array,
required: true
},
series:{
required:true
},
achiveOilDataSuccess: {//判断数据是否获取成功
type: Boolean,
required: true
},
},
mounted() {
let data = this$propsdata
thisinitOption(data)
},
updated() {
let data = this$propsdata
thisinitOption(data)
},
methods: {
//初始化图表配置
initOption(data: any) {
let vm = Echartsinit(this$refsecharts)
if (this$propsachiveOilDataSuccess === false) {
vmshowLoading({
text: 'loading',
color: '#c23531',
textColor: '#000',
maskColor: 'rgba(255, 255, 255, 02)',
zlevel: 0
})//设置加载动画
} else {
vmhideLoading()
}
if(this$propsseries){
this$propsoptionseries=this$propsseries
}
let legendNumber=this$propsoptionserieslength;
if(legendNumber===1){
this$propsoptionseries[0]data = data
}else{
for(let i=0;i<legendNumber;i++){
this$propsoptionseries[i]data=data[i];
}
}
vmsetOption(this$propsoption)
}
}
})
</script>
<style lang="scss" scoped>
echartStyle {
width: 100%;
height: 5rem;
margin: 0 auto;
}
</style>
```
然后在父组件里引用
<echarts
:option="option"
:data="thresholdAccInfoListHBase"
:achiveOilDataSuccess="achiveOilDataSuccess"
><echarts>
以上就是关于ECharts 数据可视化按照文档做了一个时间轴，怎么把不同类型的图表显示出来全部的内容，包括:ECharts 数据可视化按照文档做了一个时间轴，怎么把不同类型的图表显示出来、如何解决echarts中文乱码的问题、JavaScript echarts 问题 请教大家 看不太懂这句话什么意思等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）