echarts 使用方法

使用echarts首先要下载依赖包，在http://echarts.baidu.com/ 中选择下载，在页面中选择要下载的文件，若是不知足须要也可在最下方选择在线定制，选择须要的内容进行下载。

我用的是一次所有引用的方法。

在页面最开始引用刚才下载的包（个人包在Content/js/文件夹下）

 <script src="~/Content/js/echarts.js" type="text/javascript"></script>

 

html里面给一个div显示图片

<div id="bar" style="height:500px;border:1px solid #ccc;padding:10px;"></div>

 

而后就是画图了，我是把画图写在函数里面，调用便可。

function chart01(i, j, k, l, m) {
        // 柱状图数据
        var xinghao = [];
        var cjbaojing = [];
        var zjbaojing = [];
        var gjbaojing = [];
        var timebaojing = [];
        xinghao = i;
        cjbaojing = j;
        zjbaojing = k;
        gjbaojing = l;
        timebaojing = m;
        //用于存放图表上的数据

        var myChart = echarts.init(document.getElementById('bar',theme));//容器对象，初始化接口、图表所在节点
            

        var option = {       //设置图标参数，这些参数在echarts官网上有不一样图形的不一样option，可根据需                                        //要修改
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                legend: {
                    data: ['初级报警', '中级报警', '高级报警', '时间报警']
                },
                toolbox: {
                    show: true,
                    feature: {
                        mark: { show: true },
                        dataView: { show: true, readOnly: false },
                        magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
                        restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                calculable: true,
                xAxis: [
                    {
                        type: 'value'
                    }
                ],
                yAxis: [
                    {
                        type: 'category',
                        data: xinghao  //这里用的数组存放数据，直接写数组名便可
                    }
                ],
                series: [
                    {
                        name: '初级报警',
                        type: 'bar',
                        stack: '总量',
                        itemStyle: { normal: { label: { show: true, position: 'insideRight'} } },
                        data: cjbaojing,    //这里用的数组存放数据，直接写数组名便可
                        barWidth: 30,       //柱图宽度
                    },
                    {
                        name: '中级报警',
                        type: 'bar',
                        stack: '总量',
                        itemStyle: { normal: { label: { show: true, position: 'insideRight' } } },
                        data: zjbaojing,   //这里用的数组存放数据，直接写数组名便可
                        barWidth: 30,       //柱图宽度
                    },
                    {
                        name: '高级报警',
                        type: 'bar',
                        stack: '总量',
                        itemStyle: { normal: { label: { show: true, position: 'insideRight' } } },
                        data: gjbaojing,    //这里用的数组存放数据，直接写数组名便可
                        barWidth: 30,       //柱图宽度
                    },
                    {
                        name: '时间报警',
                        type: 'bar',
                        stack: '总量',
                        itemStyle: { normal: { label: { show: true, position: 'insideRight' } } },
                        data: timebaojing,   //这里用的数组存放数据，直接写数组名便可
                        barWidth : 30,       //柱图宽度
                    }
                ]
            };
            myChart.setOption(option);

        }

下面是效果图，里面的标签是下载包的时候可选的。