1 2 3 4 | ``` npm install echarts-for-react --save npm install echarts --save `` |
1 2 3 | import React, { Component } from 'react' import ReactEcharts from 'echarts-for-react'; import echarts from 'echarts'; |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | ` //把你在echar中编辑好的文件放在这个声明的对象中; let echartsOption = { tooltip: { trigger: 'item', formatter: "{a} { b }: { c }({ d } % ) " }, legend: { orient: 'vertical', x: 'left', data: ['天海湾', '鼎龙湾', '珍珠湾', '翠逸家园', '紫林湾'] //需要对应 series 的 name值 }, series: [ xxxxxxxxxxxxxxxxxxxx xxxxxxxxx ] } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | render() { return ( < div id = "kidAlert" > { this.echartsElement = e } } option = { echartsOption } notMerge = { true } // 重新渲染数据的 重绘的,老坑了 theme = "clear" style = { kidAlert } //这个图表的大小 /></div > ) } |
1 | import echarts from 'echarts'; |
1 2 3 4 5 | render() { return ( < div id = "kidGraph" > < /div> ) } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | let echartsOption = { title: { text: 'ECharts 入门示例' }, tooltip: {}, xAxis: { data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }); } class KpiGraph extends Component { constructor(props, context) { super(props, context) this.state = {} } componentDidMount() { this.newGraph() } newGraph() { var myChart = echarts.init(document.getElementById('kidGraph')); myChart.setOption(echartsOption) } } |
##只是学习,有误地方还请多多指点
上一篇:教你傻瓜式搭建vuePress博客主题—vuepress-theme-reco
下一篇:Vue.js项目Vue-Router路由如何设置别名访问
支付宝扫一扫打赏
微信扫一扫打赏
共 0 条评论关于"React脚手架项目中如何快速引入并使用echarts.js"
最新评论