Echarts入门

墨尘 153 0

Echarts入门

1、下载echarts/idst目录

 

2、准备dom元素

<div id="main" style="width: 600px;height:400px;"></div>

3、配置脚本

<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>

 

4、标题属性:

var option = {

title{

Text:"标题文本"

textStyle:{

Color:'主标题文字颜色'

fontStyle'italic' //斜体

fontWeight:'bold',//字体加粗

fontSize:'16px' //字体大小

}

 

}}

5、提示框 tooltip

var option = {

 tooltip: {

show:false,//

trigger:'axis',//

triggerOn:'click', //位置

position:['50%','50%']  //背景颜色

},

}

6、图例  legend

 

var option = {

legend: {

                data:['销量','测试1','测试2'], //series . name 对应

            },

 

 

}

 

7X

xAxis: {

                data: ["0:00","6:00","12:00","18:00"],

            },

 

 

8Y YAXIS

 

yAxis: {

min:0,

max:200,

axisLabel:{

                    formatter: function (value) {

var texts = [];

if(value==0){

texts.push('0');

}

else if (value <=50) {

texts.push('50');

}

else if (value<= 100) {

texts.push('100');

}

else if(value<= 150){

texts.push('150');

}

else{

texts.push('200');

}

return texts;

 

                    }

                }

                },

 

 

9、工具栏

toolbox: {

show: true,

feature: {

dataZoom: {

yAxisIndex: 'none'

},

dataView: {readOnly: false},

magicType: {type: ['line', 'bar']},

restore: {},

saveAsImage: {}

}

},

 

 

10、系列列表 建立坐标系 X轴数据与Y轴数据的对应关系 type决定使用图表类型 line折线   pie饼状图   bar条形图   map 地图

 

 

 

11、使用echarts 统计mongodb用户的操作

查询  按照时间统计用户的操作   时间段 X轴  操作次数 Y轴


  • 评论列表

留言评论