ECharts的简单使用过程

时间：2016-09-27 13:33:09 阅读：132 评论：0 收藏：0 [点我收藏+]

标签：

网页中经常要使用图表，以前使用的是highcharts插件，现在发现echarts使用起来和highcharts差不多，但是个人感觉echarts更酷炫，以下是echarts的使用过程，其实highcharts使用方法也跟这个差不多，几乎一样。

1、使用基础图形引入js

引入<script type="text/javascript" src="/js/echarts.min.js"></script>

2、需要显示组件，如图例，引入组件

还需要引入<script type="text/javascript" src="/js/echarts-all.js"></script>

3、画布：必须指定高度，否则不会显示

4、使用，定义、显示

var cjhq_chart ;
var option = {
            title: {
                text: ‘均价（元/平米）‘
            },
            tooltip : {
                trigger: ‘axis‘
            },
            legend: {
                data: legendData//数组
            },
            grid: {
                left: ‘3%‘,
                right: ‘4%‘,
                bottom: ‘3%‘,
                containLabel: true
            },
            xAxis : [
                {
                    type: ‘category‘,
                    boundaryGap : false,
                    data : xAxisData//数组
                }
            ],
            yAxis : [
                {
                    type : ‘value‘
                }
                
            ],
            series : ySeries//数组
        };
cjhq_chart = echarts.init(document.getElementById(‘Chart‘));
cjhq_chart.setOption(option, true);