echarts使用|json，报错过滤器失败

问题遇到的现象和发生背景

问题相关代码，请勿粘贴截图

  <script>
    var chartDom = document.getElementById('main1');
var myChart = echarts.init(chartDom);
var option1;


    option = {
  backgroundColor: '#2c343c',
  title: {
    text: 'Customized Pie',
    left: 'center',
    top: 20,
    textStyle: {
      color: '#ccc'
    }
  },
  tooltip: {
    trigger: 'item'
  },
  visualMap: {
    show: false,
    min: 80,
    max: 600,
    inRange: {
      colorLightness: [0, 1]
    }
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '55%',
      center: ['50%', '50%'],
      data:  {{data|tojson}}     <========================================在这里
      .sort(function (a, b) {
        return a.value - b.value;
      }),
      roseType: 'radius',
      label: {
        color: 'rgba(255, 255, 255, 0.3)'
      },
      labelLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.3)'
        },
        smooth: 0.2,
        length: 10,
        length2: 20
      },
      itemStyle: {
        color: '#c23531',
        shadowBlur: 200,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
      },
      animationType: 'scale',
      animationEasing: 'elasticOut',
      animationDelay: function (idx) {
        return Math.random() * 200;
      }
    }
  ]
};

option && myChart.setOption(option);
</script>

运行结果及报错内容

Invalid filter: 'tojson'

我的解答思路和尝试过的方法

我想要达到的结果

处理成图表需要的数据结构后，放到对应data位置，再setOption