最近想做一个基金的标注工具，用echarts开发了前端部分，顺便看到fluid这个主题可以很方便的在博客中插入echarts图表，做一个记录。

教程参见: 使用 ECharts 插件绘制炫酷图表

第一步是安装插件

npm install hexo-tag-echarts --save

基础图表的例子

{% echarts 400 '85%' %}
option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
};

{% endecharts %}

标注工具代码

let base = +new Date(2010, 1, 1);
let oneDay = 24 * 3600 * 1000;
let date = [];
let s = Math.random() * 300;
let data = [[s, s, s, s]];
for (let i = 1; i < 365*12; i++) {
  var now = new Date((base += oneDay));
  date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
  var v = ((Math.random() - 0.5) * 0.05 + 1)*data[i - 1][1];
  // 开盘价、收盘价、最低价、最高价
  data.push([v*(1 + (Math.random() - 0.5)*0.01), v, v*0.995, v*1.005]);
}

option = {
  toolbox: {
    feature: {
      dataZoom: {
        yAxisIndex: false
      },
      brush: {
        type: ['lineX', 'clear']
      }
    }
  },
  brush: {
    xAxisIndex: 0,
    throttleType: 'debounce',
    throttleDelay: 600,
    inBrush: {
      symbolSize: 4,
      color: '#FF3333'
    },
    outOfBrush: {
      colorAlpha: 0.1
    }
  },
  dataZoom: [
    {
      type: 'inside',
      start: 0,
      end: 100
    },
    {
      start: 0,
      end: 100
    }
  ],
  xAxis: {
    type: 'category',
    data: date
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: data,
      type: 'candlestick',
      lineStyle: {
        normal: {
          width: 2,
        }
      }
    }
  ]
};

myChart.on('brushSelected', function (params) {
  var brushed = [];
  var target = params.batch[0]['selected'][0]['dataIndex'];
  if(target.length>0){
    console.log(target);
    console.log(target.length);
  }
    
});

这里需要注意的是：

如果直接把上述所有代码放入{% echarts 400 '85%' %} {% endecharts %}里是无法显示的。因为hexo-tag-echarts这个插件在生成js代码的时候是将里面的东西均作为配置来用模板套用。比如上面的那个简单的折线图，生成的结果如下：

<script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echarts8038'));

        // 指定图表的配置项和数据
        var option = option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
};


        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
</script>

所以需要将数据部分单独拎出来，放到<script></script>中。