太郎環境、echartピットツアーを導入
天才の第一歩 コンポーネントec-canvasの紹介
天才ステップ2 チャートのカスタマイズ
Geniusステップ2、好きなチャートをカスタマイズしますが、このコンポーネントには特別な制限があり、直接使用することができません // 公式コンポーネントが単体でどのように動作するかは知りません jsファイルは1つで500kを超えることはできませんし、圧縮されたechartはそれでもそれ以上です。
ジーニアスその3 echartを圧縮.js
問題なく動くので、巡礼にはオススメです！ファイルディレクトリ
外部紹介は以上です。
天才ステップ4：コードを書く
import Taro, {
Component
} from '@tarojs/taro';
import {
View,
Text,
Image
} from '@tarojs/components';
import './radarChart.less';
import * as echarts from "../../components/ec-canvas/echarts";
let chart = null;
function setChartData(data, indicator) {
var option = {
backgroundColor: "#ffffff",
color: ["#37A2DA", "#FF9F7F"],
xAxis: {
show: false
},
yAxis: {
show: false
},
radar: {
center: ['50%', '50%'],
radius: 80,
name: {
textStyle: {
color: '#59a17a',
fontSize: 20,
}
},
// shape: 'circle',
indicator: indicator
},
series: [{
name: ' ,
type: 'radar',
label: {
show: true,
color: 'red',
},
data: data
}]
};
chart.setOption(option);
}
class RadarChart extends Component {
config = {
navigationBarTitleText: 'taro echarts',
usingComponents: {
"ec-canvas": "../ec-canvas/ec-canvas"
}
};
state = {
ec: {
lazyLoad: true
}
};
refresh(data, indicator, screenInfo) {
this.Chart.init((canvas, width, height) => {
let defaultHight = { //デフォルトの高さを埋める場合
width: screenInfo.width,
height: screenInfo.height
}
chart = echarts.init(canvas, null, defaultHight);
setChartData(data, indicator);
return chart;
});
}
refChart = node => (this.Chart = node);
render() {
return ( < View className = "container" >
<ec-canvas ref = {this.refChart } canvas-id = "mychart-area" ec = { this.state.ec} force-use-old-canvas = "true" />
</View>
);
}
constructor(props) {
super(props)
this.state = {
ec: {
lazyLoad: true
}
}
}
componentDidMount() {
//データの出所を教えて欲しいなら、右を向け。
// echartデータレーダーチャートシリーズの設定
_this.refresh(dataValA, indicator,
//チャートの幅と高さを設定する
{
width: res.screenWidth - 50,
height: (res.screenWidth - 50) / 1.3
});
}
componentWillMount() {}
}
export default RadarChart;
