echart相关操作

 

一个基础的chart图

drawLine(){
    // 基于准备好的dom，初始化echarts实例
    let myChart = this.$echarts.init(document.getElementById('myChart'))
    // 绘制图表
    myChart.setOption({
        tooltip: {},
        xAxis: {
            data: ["低热（37.3~38）","中热（38.1~39）","高热（>39.1）"]
        },
        yAxis: {
            min: 0,
            max: 10,
            interval: 2, //间隔
            minInterval: 1, //设置成1保证坐标轴分割刻度显示成整数。
        },
        series: [{
            // name: '销量',
            type: 'bar',
            data: [4, 2, 1],
            barWidth:'50',//设置柱宽度
            itemStyle: {
                normal: {
                    // 随机显示
                    //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}

                    // 定制显示（按顺序）每个柱子的颜色
                    color: function(params) {
                        var colorList = ['#EAA90E','#FC6E19','#E30D0D'];
                        return colorList[params.dataIndex]
                    }
                },
            },
        }]
    });
    window.addEventListener("resize", function () {
        myChart.resize();
    });

},

 

 

 

（1）chart自适应，一个或者多个图表的情况

   

 setTimeout(function (){
     window.onresize = function () {
         myChart.resize();
     }
 },200)

 window.addEventListener("resize", function () {
        myChart.resize();
    });

-------------------------------环形图表----------------------------------------------------

drawLine2() {
    // 基于准备好的dom，初始化echarts实例
    var myChart2 = this.$echarts.init(document.getElementById('myChart2'));
    myChart2.setOption({
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
            orient: 'center',
            left: 'right',
            padding: [0, 70, 0, 0],
            textStyle: {
                fontSize: 16,
                color: '#838384',
            },
            top: 30,
            data: ['无症状', '发热', '咽痛', '流涕', '肌痛', '鼻塞', '干咳', '乏力', '腹泻']
        },
        series: [
            {
                name: '症状',
                type: 'pie',
                radius: ['50%', '70%'],
                center: ['40%', '50%'],
                data: [
                    {value: 335, name: '无症状'},
                    {value: 310, name: '发热'},
                    {value: 234, name: '咽痛'},
                    {value: 135, name: '流涕'},
                    {value: 1548, name: '肌痛'},
                    {value: 234, name: '鼻塞'},
                    {value: 135, name: '干咳'},
                    {value: 1548, name: '乏力'},
                    {value: 1548, name: '腹泻'}
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },
                itemStyle: {
                    normal: {
                        color: function (params) {
                            var colorList = ['#3CB371', '#FF3232', '#FF8350', '#48D1CC', '#9969FF', '#4852A1', '#FFB92C', '#008B8B', '#418CF0'];
                            return colorList[params.dataIndex]
                        }
                    },
                },
            }
        ]
    })
    window.addEventListener("resize", function () {
        myChart2.resize();
    });
}