echarts 双折线图 实现 与虚线

echarts 双折线图 实线与虚线
请引入echarts
在main 文件中

//echarts
import echarts  from 'echarts';
import 'echarts-gl'
Vue.prototype.$echarts= echarts ;
Vue.use(echarts);

效果图

实现代码

<template>
    <div>
        双折现
        <div id="main"></div>
    </div>
</template>
<script>
export default {
    props:['lines'],
    data(){
      return{

      }
    },
    mounted(){
        var data = {
            title: ['总计', '12-01', '12-02', '12-03', '12-04', '12-05', '12-06', '12-07', '12-08', '12-09'],
            plan_production: [500, 300, 490, 333, 346, 777, 888, 864, 789, 765],
            actual_production: [300, 400, 500, 300, 400, 500, 300, 400, 500, 500],
            attainment_rate: [60, 80, 90, 60, 70, 80, 90, 60, 70, 90],
            productivity: [30, 45, 88, 100, 110, 70, 80, 90, 100, 100]
        };

        for (var pr in data) {
            data[pr] = data[pr].slice(1, -1);
        }

        function getTableLine(num) {
            var list = [];
            var bottom = 122;
            // 行的高度
            var height = 20;
            for (var i = 0; i < num; i++) {
                list.push({
                    type: 'line',
                    bottom: bottom - i * height,
                    // 偏移量
                    right: 80,
                    style: {
                        fill: '#333'
                    },
                    shape: {
                        x1: 0,
                        y1: 0,
                        // 控制坐标做线条
                        x2: 0,
                        y2: 0
                    }

                });
            }
            return list;
        }
       // getTableLine参数代表行
        var lineList = getTableLine(3);
       // 获取页面标签
       var myChart = this.$echarts.init(document.getElementById('main'));
        //指定图标的配置和数据
         myChart.setOption({


        title: [{
            text: '\n实际产出\n达成率\n生产效率',
            bottom: 72,
            left: 10,
            textStyle: {
                lineHeight: 20,
                fontSize: 13,
                fontWeight: 'normal',
                formatter: function(value) {
                    return '{table|' + value + '}';
                },
                rich: {
                    table: {
                        align: 'center'
                    }
                }
            }
        }],
        // 图表范围
    grid: {
        bottom: 150,
        left: 80,
        right: 80
    },
    xAxis: [{
        type: 'category',
        boundaryGap: true,
        data: data.title,
        axisTick: {
            // 控制表格高度
            length: 70
        },
        axisLabel: {
            formatter: function(value, index) {
                return '{table|' + value +'}\n{table|' + data.plan_production[index] + '}\n{table|' + data.actual_production[index] +'}';
            },
            rich: {
                table: {
                    lineHeight: 20,
                    align: 'center'
                }
            }
        }
    }],
    yAxis: [{
        type: 'value',
        // show : false,
        scale: false,
        minInterval: 1,
        name: '数量',
        // 取消 y 轴刻度
        axisTick: {
          show: false
        },
        // 控制 y 轴网格线
        splitLine: {
            show: true
        },
        // 取消 y 轴保留网格线
        axisLine:{
            show: false
        },
        // min: function(v) {
        //     return Math.max((v.min - 10), 0);
        // }
    }],
    // 图表类型及数据填充
    series: [
    {
        name: '达成率',
        type: 'line',
         //  smooth位false，为true是不支持虚线，实线就用true
        smooth:false,
        itemStyle:{
            normal:{
                lineStyle:{
                    // 设置线的宽度
                   width:1,
                   //'dotted'虚线 'solid'实线
                   type:'dotted'  
                }        
            }
        },
        label: {
            show: true,
            position: 'top',
            formatter: '{c} %'
        },
        // 控制y轴方向是在右边是左边 0 是右面  1是左边
        yAxisIndex: 0,
        data: data.attainment_rate
    }, 
    {
        name: '生产效率',
        type: 'line',
        label: {
            show: true,
            position: 'top',
            formatter: '{c} %'
        },
        yAxisIndex: 0,
        data: data.productivity
    }],
    graphic: lineList


        });
    }
}
</script>
<style scoped>
 #main{
   width:100% ;
   height:25rem;
 }
</style>