echart 双轴图开发

此次后台使用的语言是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);

实例图如下:


示例图



好了,分享就到这里了,望各位多多指教!

推荐阅读更多精彩内容