使用Echart制作报表

标签: javascript  ecahrt  报表  前端

  1. 首先引用 <script src="~/Scripts/echarts.js"></script>
  2. 引用主题 <script src="~/Scripts/macarons.js"></script>
  3. 申明div容器,容器需要指定宽高
<script src="~/Scripts/echarts.js"></script>
<!-- 引入 vintage 主题 -->
<script src="~/Scripts/macarons.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>

 

<script>
// 第二个参数可以指定前面引入的主题
    var myChart = echarts.init(document.getElementById('main'), 'macarons');
    // 指定图表的配置项和数据
    var option = {
        title: {
            top: "top",//指定标题 容器的相对位置
            left: "center",
            text: '我的 ECharts',
            subtext: '纯属虚构'//副标题
        },
        tooltip: {
            trigger: 'axis'
        },
         grid: {
                containLabel:true,//防止标签文字过长,显示不全
            },
        toolbox: {//平铺、折叠、生成png图片
            show: true,
            feature: {
               
                dataView: { readOnly: false },
                magicType: { show: true, type: ['stack', 'tiled', 'line', 'bar'] },
                restore: { show: true },
                saveAsImage: { show: true }
            }
        },
        legend: {//对应不同的图标
            data: ['销量', '进货'],//系列1
            bottom: "bottom",//指定图标 容器的相对位置
        },
        xAxis: {
            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
            axisLabel: {
                            show: true,
                            interval: 0,
                            rotate: 45,//防止文字重叠,进行偏移
                            margin: 2,
                            textStyle: {
                                color: "#222"
              },

                      //formatter: function (val) {  //文字竖立显示
                            //    return val.split("").join("\n");
                            //}
        },
        yAxis: {
               splitLine: {
                            show:true,//是否显示网格线
                        }
},
        series: [{
            name: '销量',
            type: 'bar',        
            data: [5, 20, 36, 10, 10, 20,             
            ],
            //markPoint: {
            //    data: [
            //        { type: 'max', name: '最大值' },
            //        { type: 'min', name: '最小值' }
            //    ]
            //},
            //markLine: {
            //    data: [
            //        { type: 'average', name: '平均值' }
            //    ]
            //}
        }, {
            name: '进货',
            type: 'bar',
            smooth:true,
            data: [5, 50,36, 10, 69,20]
        }
        ],
         
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(
        option  
        );   
</script>

效果图

官方文档介绍很多的图表、有很多用法值得学习

 http://echarts.baidu.com/option.html#animationThreshold

 

原文链接:加载失败,请重新获取