此次后台使用的语言是PHP，遇到的问题就是后台的数组传递到前台，前台页面控制台输出的是Arra{native code}；所以前台取不到值，所以我们用json_encode下转换一下在传到前台就好了。
开场白：害怕你性子急，所以echart官方配置项手册直接去参考开发。
第一步，js文件引入，下载地址请点击！
<script src="../echarts.js"></script> ps：前面的“..”代表你放置的路径
第二步，初始化echarts实例
初始化的前提是在html页面内先有echarts展示的位置，在进行展示（个人习惯）。
html 代码：
<div id="chart" style=""></div>
js 代码初始化实例：var myChart =echarts.init(document.getElementById('chart'));
第三步，该部分的核心内容配置option
（1）title属性：见字知意，就是配置你所需的主题（通常就是你图形的标题了，如果有特殊的处理可以详细参考title属性配置。
eg：title{ text：‘某某数据图’}，，这里打两个逗号是为了区分在配置option时，你不会只配置title，所以各个配置项之间用大括号进行分割。
（2）tooltip：{trigger：‘axis’}这个属性就是提示框组件了，可以用也可以不使用，其中trigger的触发机制还有两个分别是“item”和“none”。不做赘述
（3）legend 配置项。 这个当然也是可以没有的，但是它主要展示的是在你的坐标轴包含多种种类的数据对比时，它就能帮到你了。
eg：legend: {
type:'scroll', // 这个type默认是不滚动的，当然你的data很多的时候，它的作用就起到了
show:true, //见字知意
padding:[0,50,0,150], //可有可无，如果你觉得它显示的位置你不喜欢的话，可以进行微调哦，如果想要改变展示的位置就要用到top，bottom，left和right等属性了，不做赘述。
data:['A','B','C'], //你需要展示的数据值，当然也可以获取后台传来的值，遇到取不到看我的顶部内容哦！
selected:{ //可以选择你想让你的数据哪些在起初不进行展示，例子如旁
'A':false
}
}
（4）series 属性。现在就说这个是与上面的legend有关哦。这里展示的数据数据项要与legend要对应哦，不然legend的数据展示会出现异常。而且你的图形走势与series有关。
eg：series: [
{
name:'A',
data:[] //这个数据值与x轴的内容相关，可以说是一一对应的，x轴有几个这里就有几个数据值，否则图形不会展示，控制台会提示错误哦！
type:'bar', // 这个是要展示的是柱状图还是折线还是什么。但是如果是扇形的话就不能是坐标轴了额，需要重新开始配置，这里不做赘述。
},
]
当然series你可以用循环输出哦，后面会附我的例子！
（5）color 可以设置显示的颜色，随机的！
（6）grid 配置整个图形的展示大小。在grid也可以配置多个坐标轴哦，小伙伴自己发掘一下哦，这里不做太多阐述。
eg：
grid: {
left:'2%',
right:'5%',
bottom:'3%',
containLabel:true
}
（7）xAxis：横坐标轴，在一个矩形坐标轴内可以有两个上或者下，具体的配置就是用"[]"进行包含，这也就是为什么series外层用的是【】而不是{}。其中x轴配置项中除了data和type属性很简单外，这里重点说另外两个，一个是boundaryGap属性，它有两个值true和false，true就是x轴不会从坐标原点开始，相反false会从原点开始。axisLabel属性这个是控制x轴文字内容显示的，通过interval和rotate来处理x轴显示内容过多时，为了不重叠。
（8）yAxis:同x轴不做赘述。
（9）强调一点吧，如果你使用双x轴或者双y轴的情况下，一定要在series里使用一个属性，那就是yAxisIndex：1 这里是数组的下标值，以双y轴为例。
第四步 将配置加入到echart中
myChart.setOption(option);
到此一个图形的展示就完成了。我在使用时的配置项内容：
var myChart =echarts.init(document.getElementById('chart'));
// 指定图表的配置项和数据
var option = {
title: {
text:'报表数据图'
},
tooltip: {
trigger:'axis'
},
legend: {
type:'scroll',
show:true,
padding:[0,50,0,150],
data:{$graphStr},
selected:{
'申请UV':false
}
},
color: [
'#FF3333',
'#53FF53',
'#B15BFF',
'#68CFE8',
'#FFDC35',
'#5fb8df',
'#ff3fa4',
'#19ff1a',
'#1507ff',
'#8280ff',
'#f3ff86',
],
grid: {
left:'2%',
right:'5%',
bottom:'3%',
containLabel:true
},
toolbox: {
feature: {
saveAsImage:{}
}
},
xAxis: {
type:'category',
boundaryGap:true,
data:{$arrGData}['data_time'],
axisLabel:{
interval:0,
rotate:{$arrGData}['data_time'].length >5 ? -90 :0
}
},
yAxis: [
{
type:'value',
name:'整数',
position:'left'
},
{
type:'value',
name:'百分比/%',
position:'right'
}
],
series: [
{foreach $graphNumber as $key=>$item}
{
name:'{$key}',
data:{$arrGData}['{$item}'],
type:'bar',
barWidth:0
},
{/foreach}
{foreach $graphPercent as $key=>$item}
{
name:'{$key}',
data:{$arrGData}['{$item}'],
type:'line',
yAxisIndex:1
},
{/foreach}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
实例图如下：
示例图
好了，分享就到这里了，望各位多多指教！
网友评论