赵健的个人博客

Menu

vue1.x+typescript引入echarts

最近在用node写服务层,了解到koa,express,async等,玩了几天的MongoDB,mysql,redis,发现后台服务真的很有趣,要深入研究的东西层出不穷。今天公司开会csp项目要新增数据分析功能模块,前端也就是用echarts展示下数据图表就行了,十分简单啊。之前其他项目都用highcharts做过了数据图表展示的功能,只是没有用vue去写过而已。不过项目中用的是早已过时的vue1.0+typescript的框架,担心的是echarts不能够很友好的引入,看来是我多虑了,以下记录下引入echarts方法。唉,这迭代下面就把项目用vue2重构下,不能再拖了。。。

1.安装echarts

npm install echarts -g --save

安装完成后,package.json中有对应的版本号

安装TS头文件
typings install echarts=github:DefinitelyTyped/DefinitelyTyped/echarts/echarts.d.ts#3305eb6f74a2de17d208dfaaa20d69cfb912f871 --save --global

安装完成后typings文件夹下有对应的文件,这下引入echarts模块就不会报not found echarts module啦。

如果typings命令报错的,先安装typings

npm install typings -g --save

2.在main.js中引用echarts

我这边是ts

3.在页面内写入为echarts渲染的dom元素,设置固定高度否则不美观

 

4.在ts文件内引入echarts对应模块,并写入对应逻辑代码
这边就直接放在ready()内

// 引入基本模板,如果在项目中对体积要求比较苛刻,也可以只按需引入需要的模块(可以按需引入的模块列表)
 // let echarts = require('echarts/lib/echarts')
        // 例如:引入柱状图
        // require('echarts/lib/chart/bar');
        let chartBox = document.getElementById('charts')
        let myChart = document.getElementById('myChart')
        function resizeCharts() {//为调整图标尺寸的方法
            myChart.style.width = chartBox.style.width + 'px'
            myChart.style.height = chartBox.style.height + 'px'
        }
        let mainChart = echarts.init(myChart)// 基于准备好的dom,初始化echarts实例
        var option = null;
        // 指定图表的配置项和数据
        option = {
            title: {
                text: 'ECharts图表'
            },
            tooltip: {},
            legend: {
                data: ['数学成绩','语文成绩','平均成绩']
            },
            xAxis: {
                data: ["A班", "B班", "C班", "D班", "E班"]
            },
            yAxis: {},
            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}
                }
            },
            series: [{
                name: '数学成绩',
                type: 'line',
                data: [95, 88, 80, 77, 75]
            },
            {
                name: '语文成绩',
                type: 'line',
                data: [85, 76, 86, 92, 68]
            },
            {
                name: '平均成绩',
                type: 'line',
                data: [90, 75, 99, 65, 85]
            }
        ]
        };
        // 使用刚指定的配置项和数据显示图表。
        if (option && typeof option === "object") {
            mainChart.setOption(option, true)
        }

最后npm run dev运行查看,完美展现!

       

打赏作者↓↓↓
— 编辑于 共写了1839个字
— 文内使用到的标签:
— 阅读数:1,130
— 暂无评论

Leave a Reply

Your email address will not be published. Required fields are marked *