TWSNMP FC:グラフ表示で悩む ２日目

今朝４時に猫が起こしてくれました。TWSNMP FCのグラフ表示ライブラリを選ぶことに悩んでいるのを察してかもしれません。昨日は、vue-chartjsを試しました。今朝は、まず

ecomfe/vue-echarts

を試してみました。しかし、残念ながらエラーがでてグラフを表示できません。２時間、試行錯誤しましたが上手く行かないので諦めて昨日試したvue-chartjsで我慢しようかと思いました。最後に、vue対応のライブラリをやめてecharts

Apache ECharts

だけを利用してNuxtのページにグラフを描く実験をしてみました。参考にしたのは、公式の

Documentation - Apache ECharts

npm install echarts --save

をして、Nuxtのページに、

<template>
 <div id="main" style="width: 600px; height: 400px"></div>
</template>

<script>
import * as echarts from 'echarts'

export default {
 mounted() {
   const myChart = echarts.init(document.getElementById('main'))

   // specify chart configuration item and data
   const option = {
     title: {
       text: 'ECharts entry example',
     },
     tooltip: {},
     legend: {
       data: ['Sales'],
     },
     xAxis: {
       data: ['shirt', 'cardign', 'chiffon shirt', 'pants', 'heels', 'socks'],
     },
     yAxis: {},
     series: [
       {
         name: 'Sales',
         type: 'bar',
         data: [5, 20, 36, 10, 10, 20],
       },
     ],
   }

   // use configuration item and data specified to show chart
   myChart.setOption(option)
 },
}
</script>

と書くと何とグラフが表示できました。

良かったと喜んでいると猫が「ご飯、食べたい」と言ってやってきました。
これなら復刻版TWSNMPで作ったグラフ表示のソースコードを再利用できそうです。今日はここまで。
グラフの動画は

です。　明日に続く。